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内 容 简 介 


本 书 全 面 地 讲解 了 使 用 最 新 流行 轻 量 级 框架 SSM 进行 Java EE Web 开发 的 技术 ， 重 点 介绍 了 Eclipse 
开发 平台 、Spring 框架 、Spring MVC 和 MyBatis 框架 等 基础 知识 ， 并 用 三 个 SSM 框架 整合 案例 演示 框架 
应 用 技巧 和 连接 技术 ， 内 容 由 浅 入 深 ， 引 人 入 胜 。 

本 书 共 分 21 章 ， 各 基础 章节 在 知识 点 讲解 中 ， 均 结合 了 小 案例 的 精 讲 ， 以 帮助 读者 更 好 地 理解 和 掌 
握 。 综 合 实例 部 分 涉及 三 个 SSM 整合 案例 ， 均 按 功 能 分 类 ， 采 用 三 层 架 构 ( 数 据 访问 层 、 业 务 逻 辑 层 和 视 
图 层 ) 进 行 精 讲 ， 各 层 之 间 分 层 清晰 ， 层 与 层 之 间 耦 合 方法 简单 ， 读 者 可 以 全 面 理解 实现 过 程 ， 同 时 三 个 案 
例 分 别 使 用 了 三 个 流行 前 端 UI: Easy UI、Bootstrap 和 Vue， 可 以 进一步 拓展 读者 的 知识 面 。 为 方便 读者 
学 习 和 教学 开展 ， 本 书 提 供 了 全 程 真 实 课程 录像 。 

本 书 不 仅 适合 初学 者 按部就班 地 学 习 ， 也 适合 网 络 开发 人 员 作 为 技术 参考 ， 同 时 ， 也 可 作为 高 等 院 校 
计算 机 相关 专业 学 生 的 课堂 教材 。 
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前 言 


SSM 框架 是 继 SSH 之 后 ， 目 前 比较 主流 的 Java EE 企业 级 框架 ， 适 用 于 搭建 各 种 大 型 
的 企业 级 应 用 系统 。 SSM 框架 ， 是 Spring + Spring MVC + MyBatis 的 缩写 ，Spring 通过 依 
赖 注入 来 管理 各 层 的 组 件 ， 使 用 面向 方面 编程 AOP 管理 事务 、 日 志 、 权 限 等 。Spring MVC 
代表 了 Model( 模 型 )、View( 视 图 )、Controller( 控 制 ), 接收 外 部 请 求 , 进行 分 发 和 处 理 。MyBatis 
基于 JDBC 的 框架 ， 主 要 用 来 操作 数据 库 ， 并 将 业务 实体 和 数据 表 联 系 起 来 。 


1. 本 书 内 容 结构 


本 书 全 面 介 绍 了 Eclipse 开发 平台 、Spring 框架 、Spring MVC 框架 和 MyBatis 框架 等 基 
础 知识 ， 最 后 通过 三 个 具体 实例 详细 讲解 了 SSM 框架 的 整合 和 运用 。 全 书 共 分 21 章 ， 具 
体内 容 如 下 。 

第 1 章 搭建 Java Web 开发 环境 ， 主 要 介绍 Java 开发 包 (Java Development Kit)、 应 用 
服务 器 Tomcat、MySQL 数据 库 和 集成 开发 环境 Eclipse。 

第 2 章 Spring 的 基本 应 用 ,主要 介绍 Spring 框架 入 门 的 一 些 基 础 知识 ,重点 讲解 Spring 
的 核心 机 制 : 依赖 注入 /控制 反 转 。 

第 3 章 ， Spring Bean 的 装配 模式 ， 主 要 介绍 Bean 工厂 ApplicationContext、Bean 的 配 
置 、Bean 的 作用 域 和 Bean 的 装配 方式 。 

第 4 章 Spring AOP( 面 向 方面 编程 )， 主 要 介绍 Spring AOP 的 相关 概念 ， 并 以 日 志 通 
知 为 例 先后 讲解 基于 XML 配置 文件 的 AOP 实现 和 基于 @AspectJ 注解 的 AOP 实现 。 

第 5 章 Spring 的 数据 库 编程 ， 主 要 介绍 Spring 中 的 JDBC 编程 。 

第 6 章 Spring MVC 简介 ， 主 要 介绍 Spring MVC 的 模式 、 基 础 知识 和 工作 流程 。 

第 7 章 ， Spring MVC 常用 注解 ， 介 绍 Spring MVC 的 常用 注解 和 3 种 请 求 映射 方式 ， 
参数 绑 定 注 解 和 转换 JSON 格式 。 

第 8 章 Spring MVC 标签 库 ， 介 绍 Spring MVC 的 表单 标签 和 如 何 使 用 表单 标签 绑 定 
数据 。 

第 9 章 ， Spring MVC 类 型 转换 、 数 据 格式 化 和 数据 校 验 ， 介 绍 Spring MVC 的 数据 
处 理 。 

第 10 章 Spring MVC 的 文件 上 传 和 下 载 ,介绍 MultipartResolver 接 口 和 ResponseEntity 
类 型 。 

第 11 章 Spring MVC 的 国际 化 和 拦截 器 ,介绍 messageSource、LocaleResolver 国际 化 
语言 区 域 解析 器 接口 以 及 拦截 器 的 配置 。 

第 12 章 MyBatis 入 门 ， 介 绍 MyBatis 框架 的 概念 、 下 载 与 安装 和 工作 原理 ， 并 详细 
讲解 MyBatis 框架 的 基本 用 法 。 

第 13 章 MyBatis 的 关联 映射 ,介绍 使 用 MyBatis 框架 处 理 三 种 关联 关系 的 具体 
过 程 。 

第 14 章 动态 SQL， 介 绍 MyBatis 框架 的 动态 SQL 及 动态 SQL 的 主要 元 素 。 
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第 15 章 MyBatis 的 注解 配置 ， 介 绍 MyBatis 框架 基于 注解 的 单 表 增 删改 查 、 多 表 关 
联 映 射 和 动态 SQL 等 。 

第 16 章 MyBatis 缓存 , 介绍 MyBatis 框架 的 缓存 概念 和 一 级 缓存 、 二 级 缓存 的 用 法 。 

第 17 章 Spring 整合 MyBatis， 介 绍 SSM 框架 ， 并 以 登录 功能 为 例 ， 采 用 注解 方式 实 
现 Spring 与 MyBatis 框架 的 整合 。 

第 18 章 前 端 UI 框 架 ， 介 绍 jQuery Easy UI、Bootstrap 和 Vue 三 种 前 端 框架 。 

第 19 章 ” 电 商 平台 后 台 管理 系统 ， 结 合 前 端 Easy UI 框架 ， 详 细 讲 解 典型 的 电 商 平台 
后 台 管理 系统 的 具体 实现 过 程 。 

第 20 章 校园 通讯 管理 系统 ， 结 合 前 端 Bootstrap 的 H+ 框架 ， 详 细 讲 解 校园 通讯 管理 
系统 的 具体 实现 过 程 。 

第 21 章 ” 电 商 网 站 ， 结 合 前 端 Vue 框架 ， 详 细 讲 解 简单 的 电 商 网 站 的 具体 实现 过 程 。 


2. 本 书 的 特点 和 优势 


本 书 作 者 在 Java EE Web 领域 具有 多 年 的 开发 和 教学 讲解 经 验 ， 熟 悉 Java 开发 理论 知 
识 体系 ， 赁 着 娴熟 的 笔法 和 渊博 的 理论 知识 ， 采 取 精 雕 细 琢 的 写作 方式 ， 将 SSM 开发 技术 
展现 得 淋漓 尽 致 ， 能 使 读者 很 快 进入 实际 开发 角色 。 本 书 与 市 场 上 其 他 类 似 书籍 相 比 ， 具 
有 以 下 与 众 不 同 的 特色 。 

(1) 细致 全 面 : 本 书 内 容 的 编排 从 开发 环境 搭建 开始 ， 从 基本 知识 入 手 ， 由 浅 入 深 地 逐 
渐 转 入 到 高 级 部 分 ， 所 讲解 的 内 容 训 括 了 SSM 框架 的 重要 知识 点 。 注 重 介 绍 如 何在 实际 工 
作 中 活用 基础 知识 ， 做 到 高 质量 地 进行 程序 开发 。 

(2) 结合 示例 : 本 书 在 各 章 知 识 点 的 讲解 中 ， 都 结合 了 小 示例 的 精 讲 加 以 验证 。 对 特别 
难 懂 的 知识 点 ， 通 过 恰当 的 示例 帮助 读者 进行 分 析 、 加 以 理解 。 

(3) 讲解 透彻 : 本 书 在 项 目 案例 讲解 的 过 程 中 ， 均 按 功 能 分 类 ， 采 用 三 层 架构 (模型 、 
视图 、 控 制 ) 进 行 相关 组 件 的 讲解 ， 各 层 之 间 分 层 清晰 ， 层 与 层 之 间 以 松 耦 合 的 方法 组 织 在 
一 起 ， 便 于 读者 理解 每 个 功能 的 实现 过 程 。 

(4) 实用 性 强 : 本 书 的 实用 性 较 强 ， 以 经 验 为 后 盾 、 以 实践 为 导向 、 以 实用 为 目标 ， 深 
入 浅 出 地 讲解 Java Web 开发 中 的 各 种 问题 。 

(5) 课堂 实录 : 采用 知识 讲解 + 课堂 实录 的 方式 ， 提 供 一 套 全 过 程 课程 录像 ， 更 利于 读 
者 跟 进 学 习 ， 既 可 以 直接 用 于 学 校 教学 ， 又 方便 读者 自学 ， 是 很 多 初学 者 和 教学 老师 的 
选择 。 


. 本 书 读者 对 象 

@ 有 一 定 Java 基础 ， 但 是 没有 Java EE 系统 开发 经 验 的 初学 者 。 

@ “有 其 他 Web 编程 语言 (如 ASP、ASP.NET) 开 发 经 验 ， 欲 快速 转向 Java EE 开发 的 
程序 员 。 

@ 对 JSP 有 一 定 了 解 ， 但 是 缺乏 Java EE 框架 开发 经 验 ， 并 希望 了 解 流行 开源 框架 
Spring、Spring MVC 和 MyBatis 以 及 欲 对 这 些 框架 进行 整合 的 程序 员 。 

@ 有 一 定 Java Web 框架 开发 基础 ， 需 要 对 Java EE 主流 框架 技术 核心 进一步 了 解 和 
掌握 的 程序 员 。 

@ ”大 中 专 院 校 正在 学 习 编程 开发 的 计算 机 及 相关 专业 的 学 生 。 


Ox« pe 


@ 公司 管理 人 员 或 人 力 资源 管理 人 员 。 

4. 本 书 配套 资源 

本 书 附 赠 完整 的 学 习 资 源 ， 包 括 同步 教学 录像 、 教 学 PPT、 源 代码 、 素 材 文件 等 内 容 ， 
可 供 学 习 者 使 用 ， 请 从 清华 大 学 出 版 社 官网 (http://www.tup.tsinghua.edu.cn) 下 载 。 

5. 本 书 作 者 及 致谢 

本 书 由 扬州 职业 大 学 的 纪 勇 和 施 俊 编 写 。 其 中 ， 施 俊 编 写 第 1 一 11 章 ， 主 要 内 容 是 开 
发 环境 搭建 和 Spring、Spring MVC 基础 知识 ; 缪 勇 编写 第 12 一 21 章 ， 主 要 内 容 是 MyBatis 
基础 知识 和 三 个 整合 案例 。 李 新 锋 对 全 书 进行 了 审核 和 统筹 ， 其 他 参与 编写 的 人 员 还 有 王 
梅 、 陈 亚 涟 、 李 艳 会 、 刘 娇 、 王 晶 晶 、 游 名 扬 、 李 云霞 、 王 永 庆 、 蒋 梅 芳 、 谢 伟 、 纪 航 、 
沈 勇 等 ， 同 时 扬州 国 脉 通信 发 展 有 限 责任 公司 、 江 苏 智 途 科 技 股 份 有 限 公 司 也 为 本 书 的 编 
写 提供 了 帮助 ， 在 此 一 一 向 他 们 致谢 。 

由 于 作者 水 平 有 限 ， 书 中 难免 存在 一 些 不 足 和 政 漏 之 处 ， 敬 请 读者 批评 指正 。 
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第 1 章 搭建 Java Web 开发 环境 


搭建 软件 开发 环境 是 开发 软件 的 第 一 步 ， 优 秀 的 开发 环境 能 帮助 程序 员 提高 开发 速度 。 
本 章 将 讲述 如 何 搭建 Java Web 的 开发 环境 ， 包 括 如 下 内 容 : Java 开发 包 (Java Development 
Kit)、 应 用 服务 器 Tomcat、MySQL 数据 库 和 集成 开发 环境 Eclipse。 


1.1 建立 JDK 的 环境 


JDK 是 Java Development Kit 的 缩写 ， 是 整个 Java 的 核心 ， 包 括 Java 运行 环境 、 大 量 
的 Java 工具 和 Java 基础 类 库 。 主 流 的 集成 开发 环境 (IDE)， 比 如 Eclipse、NetBeans、IntelliJ 
IDEA 等 ， 都 基于 JDK 环境 ， 有 些 IDE 在 安装 时 内 置 了 JDK， 有 些 则 需要 单独 安装 。JDK 
由 Sun 公司 开发 ， 现 已 被 Oracle 公司 收购 ， 它 为 Java 程序 提供 编译 和 运行 环境 ， 不 管 是 做 
Java 开发 还 是 安 卓 开发 都 需要 在 计算 机 上 安装 JDK。 


1.1.1 下 载 与 安装 JDK 
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1-1 JDK 下 载 页 面 
Java SE Development Kit 9.0.4 


You must accept the Oracle Binary Code License Agreement for Java SE to download this 


I Accept License Agreement 图 Decline License Agreement 


Product / File Description File Size Download 
Linux 305.07 MB jdk-9.0.4_lintpt-x54_bin pm 


Linux 338.21 MB_ 划 jdk-9 0 4_Iintx-x64_bin tar gz 
macOS 382.11 MB 和 jdk-9.0.4_osx-x64_bin dmg 
Windows 375.56 MB jdk-9.0.4_windows-x64_bin exe 
Solars SPARC 206 97 MB §jdk-9 0.4_solaris-sparcv9._bin tar gz 


图 1-2 JDK 下 载 版 本 选择 
提示 : 笔者 的 系统 为 64 位 的 Windows 10， 下 载 的 是 jdk-9.0.4 _ windows-x64 bin.exe 文件 。 


安装 JDK 9 的 步骤 如 下 。 

(1) 双击 下 载 的 exe 程序 ， 进 入 安装 向 导 界面 ， 单 击 “ 下 一 步 ”按钮 ， 如 图 1-3 所 示 。 

(2) 进入 定制 安装 界面 , 选择 相应 的 功能 ， 这 里 我 们 设置 为 默认 路 径 , 也 可 单 击 “ 更 改 ” 
按钮 ， 修 改 为 其 他 路 径 ， 然 后 单 击 “ 下 一 步 ”按钮 ， 如 图 1-4 所 示 。 


| 期 Java(TM) SE Development Kit 9.0.4 (54-bi - 安装 得 序 x| 期 Java(TM) SE Development Kit 9.0.4 (64-bit - 定制 安装 x 


欢迎 使 用 Java SE 开发 工具 世 90.4 的 安装 向 叶 


本 向 导 将 指导 你 完成 Java SE 开发 工具 也 90.4 的 安装 过 程 =- 


Java Misson Central 分 析 和 诊断 工具 套件 现在 作为 ]DK 的 一 部 分 提供 。 


| WE < 上 -5 [FBY>]| BW | 
图 1-3 安装 向 导 界 面 图 1-4 自 定义 安装 界面 


(3) JDK 安装 完成 之 后 ,安装 向 导 还 会 自动 进入 JRE 安装 界面 。 用户 可 以 选择 继续 安装 
或 取消 安装 ， 若 要 安装 也 可 以 更 改 JRE 的 安装 目录 ， 如 图 1-5 所 示 。 
(4) 单 击 “ 下 一 步 ” 按 钮 ， 安 装 RE， 直 到 最 后 的 完成 界面 ， 如 图 1-6 所 示 。 
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1-5 安装 JRE 界面 1-6 “完成 界面 


1.1.2 配置 JDK 环境 变量 
JDK 安装 后 ， 如 果 要 在 DOS 控制 台 窗口 编译 执行 Java 程序 ， 需 要 对 JDK 进行 环境 变 


量 配 置 ， 配 置 过 程 如 下 。 


(1) 右 击 “ 我 的 电脑 ”， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 (或 进入 控制 面板 ， 选 
择 “ 系 统 ”)， 单 击 左 侧 的 “高 级 系统 设置 ”按钮 ， 在 弹出 的 “系统 属性 ”对 话 框 中 的 “高 
级 ”选项 卡 中 单 击 “ 环 境 变量 ”按钮 ， 弹 出 “环境 变量 ”对 话 框 ， 如 图 1-7 所 示 。 


1-7 ”系统 属性 和 环境 变量 


(2) 在 “系统 变量 ”选项 组 中 ， 单 击 “ 新 建 ” 按 钮 ， 弹 出 “新 建 系统 变量 ”对 话 框 ， 输 
入 变量 名 “JAVA_HOME”， 变 量 值 为 “C:\Program Files\Javaijdk-9.0.4”( 这 里 是 默认 的 安 
装 路 径 ， 可 根据 自己 安装 的 路 径 填 写 )， 如 图 1-8 所 示 。 

(3) 再 次 新 建 系统 变量 , 变量 名 为 “CLASSPATH”, 变量 值 为 “.:%JAVA_HOME%\lib\;” 
(注意 ， 前 面 的 “.” 表 示 当 前 路 径 ， 此 处 不 可 少 )， 如 图 1-9 所 示 。 


Has x as x 
IN AVA HOME sa [Es 

a 二 ] am en 

[GD | SRE- Ce == magn ne 2 


1-8 新 建 JAVA_HOME 变量 
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(4) 在 图 1-7 所 示 的 “环境 变量 ”对 话 框 中 ， 选 择 系 统 变量 Path， 单 击 下 方 的 “编辑 ” 
按钮 ， 在 弹出 的 “编辑 环境 变量 ”对 话 框 中 单 击 “ 编 辑 文本 ”按钮 ， 弹 出 “编辑 系统 变量 ” 
对 话 框 ， 新 增 变 量 值 : “%JAVA_HOME9%:%JAVA_HOME%bin:”， 如 图 1-10 所 示 。 


Er 


BDI- DEE- 


Ws 而 


图 1-10 修改 Path 
1.1.3 ”验证 JDK 是 否 配置 


JDK 环境 变量 配置 完成 后 ， 在 “开始 ”菜单 的 “搜索 程序 和 文件 ”文本 框 或 “运行 ” 
对 话 框 中 ， 输 入 “cmd”， 打 开 cmd.exe 程序 界面 ， 在 命令 提示 符 后 输入 “java -version” 
命令 ,屏幕 上 会 显示 JDK 的 版 本 信息 ; 再 在 命令 提示 符 后 输入 “javac” 命 令 ， 出 现 用 法 提 
示人 信息， 表示 JDK 已 经 配置 成 功 ， 如 图 1-11 所 示 。 


画 CWindows\system3Aemd.exe 


1-11 查看 Java 版 本 测试 JDK 是 否 已 配置 成 功 


1.2 建立 Tomcat 的 环境 


Tomcat 是 Apache 软件 基金 会 (Apache Software Foundation) 的 Jakarta 项 目 中 的 一 个 核心 
项 目 ， 是 一 个 免费 的 开源 Web 容器 ， 随 着 Web 应 用 的 发 展 ，Tomcat 被 越 来 越 多 地 应 用 于 
商业 用 途 , 由 Apache、Sun 和 其 他 一 些 公司 及 个 人 共同 开发 完成 。 最 新 的 Servlet 和 JSP 规 
范 总 是 能 在 Tomcat 中 得 到 体现 。 目 前 ， 官 网 上 的 最 新 版 本 是 Tomcat 9.0.4。 
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1.2.1 下 载 与 安装 Tomcat 


从 Apache 官方 网 站 可 获取 相应 版 本 , Tomcat 提供 了 安装 版 本 和 解压 缩 版 本 的 文件 , 可 
以 根据 需要 进行 下 载 。 
(1) Tomcat 的 官网 地 址 为 http://tomcat.apache.org/, 如 图 1-12 所 示 。 


pdeery 万 = 0] spede foment -woe 
9 WWD a TRAD wae 


EE Apache Tomcat® 从 f SpacHE 了 


Apache Tomcat 


Tomcat 7.084 Released 


The pache Tomeat rrolet ls proud iaannoanoeneralease olverson 2.8 of pache Tomeat. Threleame 。 
ontains a numoer of bug es and provements compared to version 7 08 ™he notable Canges compared 
No 


图 1-12 Tomcat 的 官网 首页 


(2) 单 击 左 侧 Download 下 方 的 相应 版 本 Tomcat 9， 进 入 下 载 页 面 ， 往 下 拖 动 滚动 条 ， 
找到 Tomcat 9.0.4 版 本 的 下 载 超 链接 ， 如 图 1-13 所 示 。 


restspecheorg omnes0 oo 万 -和 6] konhe Tomew® -Apec- 


Please see the BEADME Re for packaging nformation Nexpiains what every distribution contains, 


Binary Disributions 


ba512) 
er 


图 1-13 Tomcat 9.0.4 的 下 载 页 面 


(3) Core 节点 下 包含 Tomcat 9.0.4 在 不 同 平台 的 安装 文件 (根据 自己 的 系统 选择 )， 此 处 
选择 “64-bit Windows zip(pep.md5,shal,sha512)”， 单 击 该 超 链接 ， 即 可 下 载 到 本 地 计算 机 。 


提示 : 这 里 下 载 的 是 Tomcat 的 免 安 装 版 本 , 在 软件 开发 过 程 中 , 结合 使 用 IDE 开发 工具 时 ， 
建议 使 用 免 安装 版 ， 安 装 版 一 般 在 实际 部 署 中 使 用 。 


1.2.2 ”配置 Tomcat 环境 变量 


Tomcat 的 免 安 装 版 本 配置 比较 简单 , 解压 缩 后 需 设置 Tomeat 的 环境 变量 , 配置 的 方法 
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与 配置 Java 环境 变量 类 似 ， 过 程 如 下 。 


(1) 将 下 载 的 apache-tomcat-9.0.4-windows-x64.zip 文件 解压 缩 后 ， 将 其 复制 至 
C:\Program Files\ 目 录 下 ， 也 可 放 在 其 他 任何 地 方 。 
(2) 在 “环境 变量 ”对 话 框 的 “系统 变量 ”中 ， 新 建 系统 变量 CATALINA HOME, 将 


值 设置 为 C :\Program Files\apache-tomcat-9.0.4。 


(3) 修改 系统 变量 CLASSPATH, 新 增值 “%CATALINA HOME%\lib;”, 单 击 “ 确 定 ” 


按钮 完成 配置 。 


1.2.3 ”启动 与 停止 Tomcat 


(1) 解压 版 Tomcat 的 启动 方式 为 : 进入 Tomcat 在 本 地 目录 下 的 bin 子 目录 ,笔者 所 用 
计算 机 为 C:\Program Files\apache-tomcat-9.0.4\bin， 执 行 startup.bat， 就 可 启动 服务 ， 效 果 如 
图 1-14 所 示 。shutdown.bat 文件 用 于 关闭 Tomcat 服务 。 


国 Tomeat 


人 


图 1-14 启动 Tomcat 服务 成 功 


(2) 在 浏览 器 地 址 栏 中 输入 http://localhost:8080/( 这 里 8080 为 Tomcat 的 默认 端口 号 ， 
读者 可 以 根据 自己 的 实际 配置 修改 )， 进 入 Tomcat 的 Web 管理 页 面 ， 妇 


KHD Wal SEV) WA IAD ML 


Home = Documentation Confi 


© 国 Apache Tomcav904 


les Wiki Mailing Lists 


Developer Quick Start 


I Realns 8 AAA 


Documentation 


Tomcat 9.0 Documentation 


Getting Help 
EAQ and Mailing Lists 


1-15 Tomcat 成 功 安装 出 现 的 管理 页 面 


1.2.4 Tomcat 的 目录 结构 


下 面 以 Tomcat 9.0.4 版 本 为 例 ， 介 绍 Tomcat 的 目录 结构 ， 如 表 1-1 所 示 。 
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表 1-1 Tomcat 的 目录 结构 


目录 说 明 
/bin 存放 Tomcat 命令 ， 以 .sh 结尾 为 Linux 命令 ， 以 .bat 结尾 为 Windows 命令 
/conf 存放 Tomcat 服务 器 的 各 种 配置 文件 ， 例 如 server.xml 
/lib 存放 Tomcat 服务 器 运行 过 程 中 需要 加 载 的 各 种 JAR 文件 包 
/logs 存放 Tomcat 服务 器 运行 过 程 中 产生 的 日 志文 件 
/temp 存放 Tomcat 服务 器 运行 过 程 中 产生 的 临时 文件 
/work 存放 Tomcat 在 运行 时 的 编译 后 文件 ， 例 如 JSP 编译 后 的 文件 
/webapps, 发 布 Web 应 用 ， 默 认 情况 下 将 Web 应 用 的 文件 存放 在 此 目录 中 


提示 : 不 同 版 本 的 Tomcat， 目 录 结 构 略 有 区 别 。 


1.3 创建 MySQL 数据 库 环 境 


MySQL 是 一 个 小 型 关系 数据 库 管理 系统 ， 也 是 著名 的 开放 源码 的 数据 库 管理 系统 。 由 
于 其 体积 小 、 速 度 快 、 总 体 运营 成 本 低 ， 许 多 中 小 型 网 站 为 了 降低 网 站 总 体 运 营 成 本 而 选 
择 MySQL 作为 网 站 数据 库 。 


1.3.1 ”MySQL 概述 


MySQL 由 瑞典 MySQL AB 公司 开发 , 后 被 Sun 公司 收购 , 现 如 今 Sun 公司 又 被 Oracle 
公司 收购 。MySQL 针对 不 同 的 用 户 有 不 同 的 版 本 ， 分 别 为 社区 版 和 企业 版 。 
@ MySQL Community Server: 社区 版 完全 免费 ， 但 是 官方 不 提供 技术 支持 。 
@ MySQL Enterprise Server: 企业 版 能 为 企业 提供 高 性 能 数据 库 应 用 ， 高 稳定 性 的 数 
据 库 系统 ， 以 及 完整 的 数据 库 提 交 、 回 滚 以 及 锁 机 制 等 功能 ， 但 该 版 本 收费 。 


注 : MySQL Cluster 主要 用 于 建立 数据 库 集 群 服务 器 ， 需 在 以 上 两 个 版 本 的 基础 上 使 用 。 


MySQL 的 命名 机 制 由 3 个 数字 组 成 ， 例 如 ，MySQL-5.7.21。 
@ 第 1 个 数字 5 是 主 版 本 号 ， 用 于 描述 文件 格式 ， 表 示 版 本 5 的 所 有 发 行 版 都 有 相 
同 的 文件 格式 。 

@ 第 2 个 数字 7 是 发 行 级 别 ， 它 与 主 版 本 号 组 合 在 一 起 构成 发 行 序列 号 。 

@ 第 3 个 数字 21 是 此 发 行 系列 的 版 本 号 ， 目 前 MySQL 5.7.21 是 最 新 版 本 。 

由 于 其 社区 版 的 性 能 卓越 , 搭配 Linux、PHP 和 Apache 可 组 成 良好 的 LAMP 开发 环境 。 
与 大 型 的 关系 型 数据 库 ( 如 Oracle、DB2 和 SQL Server 等 ) 相 比 ，MySQL 的 规模 小 ， 功 能 
限 ， 但 对 于 中 小 企业 和 个 人 学 习 使 用 来 说 ， 其 提供 的 功能 已 经 足够 用 ， 本 书 的 后 续 程序 ， 
就 是 使 用 MySQL 数据 库 作为 后 台数 据 库 管 理 系统 。 
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1.3.2 下载 MySQL 


可 以 从 官网 下 载 MySQL， 其 最 新 版 本 为 5.7.21， 下 面 介绍 如 何 从 官网 下 载 。 
(1) 进入 官网 主页 http://www.mysql.com/, 在 官网 下 载 需 要 注册 , 单 击 右上 角 的 Register 
链接 ， 如 图 1-16 所 示 。 


@ 国 nrps/wwwmysqlcom 只 -有 | 国 wsal 
文人 日 。 策 各 日， 井 吾 0 必 基 有) 工 姑 0 大吉 (H) 


Contact wy5QL 局 


Search Logn | Register 


MySQL MYSQLCOM DOWNLOADS DOCUMENTATION DEVELOPERZONE 


New! MySQL Enterprise Monitor v| 


1-16 ”MySQL 官网 首页 


(2) 跳 转 进入 注册 页 面 ， 因 现在 都 属于 Oracle 公司 ， 所 以 会 跳 转 到 Oracle 的 注册 页 面 ， 
填写 信息 ， 如 图 1-17 所 示 。 


@ @ httpsi//profile.oracle.com/myprofile/acc 局 - 昌吉 | 感 oracle | 创建 帐户 
文件 昌 。 妨 强 (E) 查看 W) 收藏 关 A) 工具 CD 。 帮助 (H) 


创建 自己 的 Oracle 帐户 司 


已 有 Oracle 帐户 ? 登录 


志 子 邮件 地 址 * shikham88@163.com 电子 部 他 直 轩 为 您 的 用 户 各 . 


和 我 们 会 向 息 发 送 一 对 兢 认 电子 部 件 . 


. 于 有 必 项 同时 包含 大 小 写字 母 和 生 》 1 
E21 人 不 
人 辣 ， 并 日 必 于 外 和 个 字条。 


我 100%6 ~ 


1-17 注册 页 面 


(3) 注册 成 功 后 ， 在 MySQL 官网 上 登录 ， 进 入 网 页 http://dev.mysql.com/downloads/， 
单 击 MySQL Community Server 社区 版 本 ， 如 图 1-18 所 示 。 

(4) 进入 下 载 页 面 ,在 Select Operating System: 下 拉 列 表 中 选择 Microsoft Windows 选项 ， 
在 Select OS Version: 下 拉 列 表 中 选择 Windows (x86,64-bit) 选 项 ， 然 后 可 以 选择 安装 版 ， 也 
可 选择 压缩 配置 版 ， 这 里 单 击 Windows(x86,32 & 64-bit),MySQL Installer MSI 右 侧 的 Go to 
Download Page 按钮 ， 如 图 1-19 所 示 。 
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1-18 ”版 本 选择 页 面 
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MYSQL Community Server 5.7.21 
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图 1-19 选择 系统 版 本 


(5) 进入 类 型 选择 页 面 , 单 击 Windows(x86, 32-bit), MSI Installer (mysql- install-community- 
5.7.21.0.msi) 安 装 版 右 侧 的 Download 按钮 ， 即 可 下 载 ， 如 图 1-20 所 示 。 


-6 Wo oomead We 


MySQL Installer 5.7.21 
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1-20” MySQL 下 载 页 面 
提示 : 社区 安装 版 没有 64 位 的 安装 程序 ，32 位 的 安装 程序 也 可 安装 在 64 位 的 系统 上 。 
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1.3.3 ”安装 与 配置 MySQL 


下 载 MySQL 的 安装 程序 后 ， 进 行 MySQL 的 安装 与 配置 过 程 。 
(1) 双击 mysql-installer-community-5.7.21.0.msi 安装 文件 , 进入 License Agreement( 许 可 
协议 ) 界 面 ， 勾 选 下 方 的 1accept the license terms 复 选 枉 ， 如 图 1-21 所 示 。 


加 WeaL naker 家 


License Agreement 


To proceed you mest occept tre Onde Software Leense Team 


图 1-21 用 户 许 可 协议 界面 


(2) 单 击 Next 按钮 ， 进 入 Choosing a Setup Type( 选 择 安装 类 型 ) 界 面 ， 根 据 需 要 选择 ， 
这 里 我 们 选择 Custom( 自 定义 ) 类 型 ， 如 图 1-22 所 示 。 


回 wsak inataller 


MySQL Installer Choosing a Setup Type 
Addng communiy 
Peee edect the Satup pethatwisyouuecane 


Beck Het> Cencdl 


1-22 ”选择 安装 类 型 界面 


(3) 单 击 Next 按钮 ,进入 Select Products and Features( 选 择 产品 和 功能 ) 界 面 , 在 Available 
Products 下 方 组 件 中 ， 依 次 展开 MySQL Servers 一 MySQL Server 一 MySQL Server 5.7, 选中 
MySQL Server 5.7.21-X64, 单 击 绿色 的 右 向 箭头 , 就 会 添加 到 右 侧 , 选中 右 侧 MySQL Server 


图 < 和 
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5.7.21-X64， 单 击 Advanced Options 链接 ， 在 弹出 的 对 话 框 中 可 修改 安装 路 径 ， 如 图 1-23 
所 示 。 


MySOL. Installer 


1-23 ”选择 安装 类 型 、 修 改 安装 路 径 界面 


(4) 在 选择 产品 和 功能 界面 中 单 击 Next 按钮 后 ， 进 入 安装 界面 ， 单 击 Execute 按钮 ， 进 
行 安装 。 

(5) 安装 完成 后 , 进入 Product Configuration( 产 品 配置 ) 界 面 , 单 击 Next 按钮 , 进入 Type 
and Networking( 类 型 和 网 络 配置 ) 界 面 ， 对 于 学 习 用 户 来 说 , 在 Config Type 下 拉 列 表 框 中 选 
择 Development Machine 选项 ， 默 认 选 中 TCP/IP 复 选 框 ，Port Number 为 3306， 如 图 1-24 
所 示 。 


MySQL. Installer 


图 1-24 ”类 型 和 网 络 配置 界面 


(6) 单 击 Next 按钮 ， 进 入 Accounts and Roles( 账 户 和 角色 ) 界 面 ， 设 置 MySQL Root 用 
户 的 密码 (123456)， 可 单 击 Add User 按钮 ， 添 加 用 户 并 设置 角色 和 密码 ， 如 图 1-25 所 示 。 

(7) 单 击 Next 按 钮 ,进入 Windows Service( 服 务 ) 界 面 ,默认 选中 Configure MySQL Server 
as a Windows Service 和 Start the MySQL Server at System Startup 复 选 框 ，Windows Service 
Name( 服 务 名 称 ) 默 认为 MySQL57， 可 以 修改 ， 选 中 Standard System Account 单 选 按钮 ， 如 
1-26 所 示 。 


境 
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1-26 ”Windows 服务 界面 


(8) 单 击 Next 按钮 ， 进 入 Plugins and Extensions( 插 件 和 扩展 ) 界 面 ， 这 里 不 做 选择 ， 单 
击 Next 按钮 ， 进 入 Apply Configuration( 插 件 和 扩展 ) 界 面 ， 单 击 Execute 按钮 ， 进 行 安装 。 
安装 完成 后 , 单 击 Finish 按钮 返回 到 Product Configuration( 产 品 配置 ) 界 面 , 在 界面 上 状态 显 
示 为 Configuration Complete( 配 置 结束 )。 单 击 Next 按钮 ， 进 入 Installation Complete( 安 装 完 
成 ) 界 面 ， 单 击 Finish 按钮 ， 结 束 安装 。 


1.3.4 使 用 MySQL 数据 库 


完成 以 上 任务 后 , 可 以 进入 MySQL 5.7 Command Line Client 进行 测试 , 确保 正常 使 用 。 
操作 方法 : 选择 “开始 ”一 “所 有 程序 ”一 MySQL 一 MySQL Server 5.7 一 MySQL Command 
Line Client 命令 ， 出 现 DOS 窗口 ， 在 其 中 输入 刚刚 安装 过 程 中 设置 的 Root 用 户 密码 
(123456)， 按 Enter 键 ， 出 现 “mysql>” 提 示 界 面 ， 表 示 已 经 安装 成 功 ， 如 图 1-27 所 示 。 

绝 大 多 数 的 关系 数据 库 都 有 两 个 部 分 : 后 端 作为 数据 仓库 ， 前 端 作为 用 于 数据 组 件 通 
信 的 用 户 界 面 。 这 种 设计 非常 巧妙 ， 它 并 行 处 理 两 层 编程 模型 ， 将 数据 层 从 用 户 界 面 中 分 
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离 出 来 ， 同 时 使 数据 库 软件 制造 商 专 注 于 它们 的 产品 强项 : 数据 存储 和 管理 ， 并 为 第 三 方 
创建 大 量 的 应 用 程序 提供 了 便利 , 使 各 种 数据 库 间 的 交互 性 更 强 。 MySQL 数据 库 也 不 例外 ， 
常见 的 前 端 工具 有 SQLyog、WorkBench、Navicat 等 。 


WO 57 Command Une ciert o 


图 1-27 进入 MySQL 


SQLyog 是 业界 著名 的 Webyog 公司 出 品 的 一 款 简洁 高 效 、 功 能 强大 的 图 形 化 MySQL 
数据 库 管 理工 具 。SQLyog 官方 网 址 为 https://www.webyog.com/， 这 里 使 用 SQLyog10.2( 汉 
化 版 ) 图 形 化 前 端 工具 操作 MySQL 数据 库 。 

启动 SQLyog 程序 ， 第 一 次 使 用 时 会 出 现 选择 语言 的 界面 ， 这 里 选择 简体 中 文 ， 显 示 试 
用 信息 ， 单 击 “ 继 续 ” 按 钮 ， 弹 出 “连接 到 我 的 SQL 主机 ”对 话 框 ， 如 图 1-28 所 示 ， 这 里 
单 击 “ 新 建 ”按钮 ， 设 置 一 个 名 称 ， 我 们 输入 “My” 作 为 名 称 ， 单 击 “ 确 定 ” 按 钮 ， 在 “ 密 
码 ”文本 框 中 输入 密码 ， 也 可 先 测试 连接 ， 如 图 1-29 所 示 。 
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1-28 “连接 到 我 的 SQL 主机 ”对 话 框 (1) 图 1-29 “连接 到 我 的 SQL 主机 ”对 话 框 (2) 
单 击 “连接 ”按钮 , 进入 SQLyog 主 窗口 ， SQLyog 的 界面 操作 方式 与 SQL Server 相似 ， 
如 图 1-30 所 示 。 


PE cot Er ETT 


图 1-30 SQLyog 图 形 界面 
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1.4 搭建 Java Web 开发 环境 


1.4.1 下 载 与 安装 Eclipse 


Eclipse 开发 工具 的 官网 网 址 是 http://www.eclipse.org/, 在 首页 上 单 击 IDE & Tools 选项 ; 
进入 下 一 页 面 ， 单 击 Java EE 选项 ; 进入 下 一 页 面 ， 单 击 右 侧 的 Windows 64-bit 链接 ; 进入 
下 一 页 面 ， 单 击 DOWNLOAD 按钮 ; 进入 下 载 页 面 ， 下 载 后 的 文件 为 eclipse-jee- 
oxygen-2-win32-x86_64.zip 的 压缩 文件 ， 安 装 步骤 如 下 。 

(1) 解压 eclipse-jee-oxygen-2-win32-x86 64.zip 文件 ， 得 到 eclipse 文件 夹 。 

(2) 运行 eclipse 文件 夹 中 的 eclipse.exe 文件 ， 第 一 次 启动 Eclipse 时 ， 会 弹出 Eclipse 
Launcher 对 话 框 ， 要 求 设置 工作 空间 以 存放 项 目 文档 ， 可 设置 自己 的 工作 空间 ， 这 里 将 工 
作 空 间 设置 为 F:\eclipse-workspace， 如 果 同 时 选中 Use this as the default and do not ask again 
复 选 框 ， 下 次 启动 时 就 不 会 再 显示 Eclipse Launcher 对 话 框 了 ， 如 图 1-31 所 示 。 


图 1-31 工作 空间 选择 对 话 框 
(3) 单 击 Launch 按钮 ， 进 入 Eclipse 的 初始 界面 ， 如 图 1-32 所 示 。 


1-32 ”Eclipse 初始 界面 
1.4.2 在 Eclipse 中 配置 JDK 


在 Eclipse 中 指定 使 用 安装 的 jdk-9.0.4 版 本 的 JRE， 可 进行 如 下 设置 。 
(1) 从 菜单 栏 选择 Window 一 Preferences( 首 选项 ) 命 令 ， 在 弹出 的 Preferences 对 话 框 的 
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左 侧 选择 Java 一 Installed JREs( 已 安装 的 JRE)， 在 右 侧 单 击 Add( 添 加 ) 按 钮 ， 在 弹出 的 Add 
JRE 对 话 框 中 选择 Standard VM 选项 ， 如 图 1-33 所 示 。 

(2) 单 击 Next 按钮 ， 进 入 JRE Definition 设置 界面 ， 单 击 Directory 按钮 ， 在 弹出 的 界 
面 中 指定 JRE 的 安装 路 径 ， 也 可 在 JRE home 文本 框 中 输入 JRE 安装 路 径 。 此 处 ， 通 过 
Directory 按钮 找到 jdk-9.0.4 版 本 的 JRE 的 安装 路 径 。 确 定 后 , JRE home、JRE name 和 JRE 
system libraries 会 自动 添加 进来 ， 单 击 Finish 按钮 完成 添加 ， 如 图 1-34 所 示 。 


加 Add JRE 0 x 
_ JRE Definition ca 
Spec sttibutes for a RE 
netalled JREs -ov 
dd remove or etic RE deiribore. By dctol We heched IRE io mde to Whe = 
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Ed 
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图 1-33” ”Preferences 对 话 框 图 1-34 JRE Definition 设置 界面 


提示 : 可 根据 自己 所 用 计算 机 的 情况 ， 选 择 已 安装 的 JRE。 
1.4.3 在 Eclipse 中 配置 Tomcat 


Eclipse 安装 好 后 ， 你 会 发 现 系统 里 配置 了 相应 的 Tomecat 服务 器 ， 若 我 们 想 要 使 用 自己 
安装 的 Tomcat， 就 需要 重新 进行 如 下 配置 。 

(1) 在 Eclipse 的 菜单 栏 中 选择 Window 一 Preferences 命令 ， 弹 出 Preferences 对 话 框 ， 
在 左 侧 选择 Server 一 Runtime Environment， 单 击 右 侧 的 Add( 添 加 ) 按 钮 ， 选 择 Apache 一 
Apache Tomcat v9.0， 并 选中 Create a new local server 复 选 框 ， 如 图 1-35 所 示 。 

(2) 单 击 Next 按钮 ， 在 Tomcat Server 界面 中 ， 选 择 Tomcat 的 安装 路 径 ， 单 击 Browse 
按钮 选择 Tomcat 的 安装 路 径 ， 在 JRE 下 拉 列 表 中 可 用 默认 的 Workbench default 了 RE， 也 可 
选择 之 前 添加 的 耻 E， 单 击 Finish 按钮 完成 ， 如 图 1-36 所 示 。 

(3) 配置 完成 后 , 在 Eclipse 主 界面 下 方 的 Servers 选项 卡 中 , 就 可 以 看 见 添 加 的 Tomcat 
V9.0 Server at localhost 服务 器 了 ， 如 图 1-37 所 示 。 

(4) 双击 配置 好 的 Tomcat v9.0 Server at localhost 服务 器 ， 在 Overview 下 的 Server 
Locations 中 选中 Use Tomcat installation (takes control of Tomcat installation) 单 选 按钮 ， 并 将 
Deploy path 文本 框 中 的 内 容 修改 为 webapps， 修 改 相关 内 容 后 保存 设置 ， 如 图 1-38 所 示 。 
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图 1-37 Tomcat 服务 器 添加 完成 


目 Tomcat v9.0 Server at localhost 3 
Server Locations 
Specify the server path fle, catalina.base) and deploy path. Server must be 
published with no modules present to make changes. 
OUse workspace metadata (does not modify Tomcat installation) 
图 Use Tomcat installation (takes control of Tomcat installation) 


OUse custom location (does not modify Tomcat installation) 
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1-38 ”服务 器 设置 修改 界面 


1.5 创建 和 发 布 Java Web 工程 


安装 和 配置 Eclipse 后 ， 就 可 以 通过 在 Eclipse 中 创建 和 发 布 一 个 Web 应 用 程序 来 学 习 
Eclipse 的 大 致使 用 方法 。 下 面 的 操作 都 是 基于 Eclipse 进行 的 。 


1.5.1 创建 Web 项 目 、 设 计 项 目 目录 结构 


(1) 在 Eclipse 菜单 栏 中 选择 File 一 New 一 Dynamic Web Project 命令 ,弹出 New 
Dynamic Web Project 对 话 框 。 在 Dynamic Web Project 界面 的 Project name 文本 框 中 输入 
“myweb”, 在 Target runtime 下 拉 列 表 框 中 选择 Apache Tomcat v9.0, 在 Dynamic web module 
version 下 拉 列 表 框 中 选择 3.1 版 本 ,在 Configuration 下 拉 列 表 框 中 选择 Default Configuration 
for Apache Tomcat v9.0， 单 击 Next 按钮 ， 如 图 1-39 所 示 。 
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(2) 进入 Java 设置 界面 ， 可 以 在 src 下 添加 文件 夹 ， 这 里 不 用 修改 ， 单 击 Next 按钮 ， 


如 图 1-40 所 示 。 


| 国 New yraric Web Projeat o x 


Dynamic Web Projece 


Tt 
poche Tomeat va0 司 
Dynamic web moduie wersion 

国 

Cerfiewation 

DR Coniguration for Mpache Tomcat v30 “| | Me 的- 


point for woring vi Apache Tomcar gg urdme, 
ean Later be imtaled to wd rew funcsonanly to th 


p Now praia 
Woriing se 

口 aad projec to woriing sw Noe 
名 i | [sr ER 


1-39 ”新 建 Web 项 目 对 话 框 
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1-40 Java 设置 界面 


(3) 进入 Web Module 界面 ， 选 中 Generate web.xml deployment descriptor 复 选 框 ， 单 击 


Finish 按钮 ， 如 图 1-41 所 示 。 


(4) 设置 完成 后 ， 在 窗 体 左 侧 的 包 资源 管理 器 视图 中 ， 就 可 以 看 到 myweb 项 目的 目录 


结构 ， 如 图 1-42 所 示 。 
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图 1-41 Web 模块 设置 界面 
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1-42 ”项 目的 目录 结构 


提示 : 如 果 要 使 项 目 目录 和 MyEclipse 尽量 一 致 ， 可 将 图 1-41 所 示 界 面 中 的 Content directory 


文本 框 中 的 值 修改 为 WebRoot。 


我 们 通常 把 Java 类 文件 放 在 Java Resources 的 src 目录 下 ， 可 在 src 下 定义 包 ; 把 网 页 


文件 放 在 WebContent 目录 下 ， 可 在 根 路 径 下 定义 文件 夹 ， 这 样 方便 管理 。 
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1.5.2 ”编写 页 面 代码 ， 部 署 和 运行 Web 项 目 


下 面 使 用 集成 开发 工具 Eclipse 来 编写 一 个 JSP 页 面 ， 并 部 署 运 行 。 

(1) 创建 一 个 JSP 文件 ,选择 WebContent 并 右 击 ,在 弹出 的 快捷 菜单 中 选择 New 一 JSP 
File 命令 ， 如 图 1-43 所 示 。 

(2) 在 弹出 的 对 话 框 中 选择 路 径 和 输入 文件 名 ， 这 里 为 了 方便 ， 只 输入 一 个 index.jsp 
页 面 ， 直 接 放 在 WebContent 的 根 路 径 下 ， 如 图 1-44 所 示 。 
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1-43 创建 JSP 文件 图 1-44 输入 JSP 文件 名 称 


(3) 单 击 Finish 按钮 ， 完 成 JSP 页 面 的 创建 ， 当 然 页 面 内 容 需 要 我 们 自己 编写 。 双 击 
index.jsp 页 面 ， 在 主体 部 分 编写 提示 “欢迎 来 到 Java Web 开发 的 世界 ! ”， 并 且 把 字符 编 
码 设置 为 contentType="text/html; charset=UTF-8" 及 pageEncoding="utf-8"。 

(4) 选择 Tomcat v9.0 Server at localhost 服务 器 并 右 击 ， 在 弹出 的 快捷 菜单 中 选择 Add 
and Remove 命令 ， 在 对 话 框 的 左 侧 选择 myweb 项 目 ， 单 击 Add 按钮 ， 添 加 到 右 侧 ， 单 击 
Finish 按钮 完成 部 署 ， 如 图 1-45 所 示 。 

(5) 启动 Tomcat， 在 工具 栏 中 启动 Tomcat v9.0 Server at localhost， 如 图 1-46 所 示 ， 此 
时 会 在 Console( 控 制 台 ) 输 出 Tomecat 的 启动 信息 。 
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(6) 打开 浏览 器 ， 输 入 “http://localhost:8080/myweb/index.jsp”， 按 Enter 键 ， 运 行 结果 
如 图 1-47 所 示 。 
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本 章 详细 讲述 了 搭建 Java Web 环境 所 需 的 各 种 软件 的 下 载 及 安装 方法 ， 包 括 JDK、 
Tomcat、MySQL 和 Eclipse IDE， 以 及 在 Eclipse 中 配置 了 RE 和 Tomecat 的 方法 。 本 章 所 选择 
的 软件 , 也 是 在 开发 过 程 中 经 常用 到 的 组 合 。 最 后 在 Eclipse 中 创建 和 发 布 一 个 Web 应 用 程 
序 来 学 习 Eclipse 的 大 致使 用 方法 。 
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本 章 开 始 学 习 Spring 框架 。Spring 框架 可 以 说 是 Java 世界 最 为 成 功 的 框架 ， 已 经 发 展 
为 一 个 功能 丰富 并 易 用 的 轻 量 级 集成 框架 ， 是 当前 主流 的 Java Web 开发 框架 。Spring 是 为 
解决 企业 级 应 用 开发 的 复杂 性 而 产生 的 ， 其 核心 是 一 个 完整 的 基于 控制 反 转 (IoC) 的 轻 量 级 
容器 ， 用 户 可 以 使 用 它 建立 自己 的 应 用 程序 。 在 容器 上 ，Spring 提供 了 大 量 使 用 的 服务 ， 
将 很 多 高 质量 的 开源 项 目 集 成 到 统一 的 框架 上 。 从 某 个 程度 上 来 看 ，Spring 框架 充当 了 黏 
合剂 和 润滑 剂 的 角色 ， 它 对 Hibernate、MyBatis 和 Struts 2 等 框架 提供 了 良好 的 支持 ， 能 够 
将 相应 的 Java Web 系统 柔顺 地 整合 起 来 ， 并 让 它们 更 易 使 用 ， 同 时 其 本 身 还 提供 了 声明 式 
事务 等 企业 级 开发 不 可 或 缺 的 功能 。 


2.1 Spring 概述 


2.1.1 Spring 的 概念 
Spring 从 2004 0 
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的 JavaBean 来 完成 以 前 只 有 EJB 才能 完成 的 工作 ， 避 免 了 EJB 腔 肿 、 低 效 的 开发 模式 ， 因 
此 迅速 地 取代 EJB 成 为 了 实际 的 开发 标准 。 

Spring 是 一 个 轻 量 级 框架 ， 它 大 大 地 简化 了 Java 企业 级 开发 ， 提 供 了 强大 、 稳 定 的 功 
能 ， 又 没有 带 额 外 的 负担 ， 让 使 用 Spring 的 人 做 每 一 件 事情 的 时 候 都 有 得 体 和 优雅 的 感觉 。 
Spring 致力 于 Java EE 应 用 各 层 的 解决 方案 ， 而 不 是 仅仅 专注 于 某 一 层 的 方案 。 在 表现 层 它 
提供 了 Spring MVC 以 及 与 Stmuts 2 框架 的 整合 功能 ， 在 业务 逻辑 层 可 以 管理 事务 、 记 录 日 
志 等 ; 在 持久 层 可 以 整合 Hibernate、MyBatis、JdbcTemplate 等 技术 。 这 就 充分 体现 出 Spring 
是 一 个 全 面 的 解决 方案 ， 对 于 已 经 有 较 好 解决 方案 的 领域 ，Spring 绝 不 做 重复 的 事情 。 


2.1.2 Spring 的 优点 


Spring 作为 实现 JavaEE 的 一 个 全 方位 应 用 程序 框架 ， 为 开发 企业 级 应 用 提供 了 一 个 健 
壮 、 高 效 的 解决 方案 。 它 不 仅 可 以 应 用 于 服务 器 端 开 发 ， 也 可 应 用 于 任何 Java 应 用 的 开发 。 
Spring 框架 具有 以 下 几 个 特点 。 

(1) 非 侵 入 式 ， 所 谓 非 侵入 式 ， 是 指 Spring 框架 的 API 不 会 在 业务 逻辑 上 出 现 ， 也 就 
是 说 业务 逻辑 应 该 是 纯净 的 ， 不 能 出 现 与 业务 逻辑 无 关 的 代码 。 针 对 应 用 而 言 ， 这 样 才能 
将 业务 逻辑 从 当前 应 用 中 剥离 出 来 ， 从 而 在 其 他 的 应 用 中 实现 复 用 ;， 针 对 框架 而 言 ， 由 于 
业务 逻辑 中 没有 Spring 的 API, 所 以 业务 逻辑 也 可 以 从 Spring 框架 快速 地 移植 到 其 他 框架 。 

(2) 容器 。Spring 提供 了 容器 功能 ， 容 器 可 以 管理 对 象 的 生命 周期 ， 以 及 对 象 与 对 象 之 
间 的 依赖 关系 。 可 以 写 一 个 配置 文件 (通常 是 xml 文件 )， 在 上 面 定义 对 象 的 名 字 ， 是 否 是 单 
例 ， 以 及 设置 与 其 他 对 象 的 依赖 关系 。 那 么 在 容器 启动 之 后 ， 这 些 对 象 就 被 实例 化 好 了 ， 
直接 用 就 可 以 ， 而 且 依赖 关系 也 建立 好 了 。 

(3) IoC: 控制 反 转 ， 即 依赖 关系 的 转移 ， 如 果 以 前 都 是 依赖 于 实现 ， 那 么 现在 反 转 为 
依赖 于 抽象 ， 其 核心 思想 就 是 要 面向 接口 编程 。 

(4) 依赖 注入 : 对 象 与 对 象 之 间 依赖 关系 的 实现 ,包括 接口 注入 、 构 造 注入 、 属 性 setter 
方法 注入 ， 在 Spring 中 支持 后 两 种 注入 。 

(5) AOP: 面向 方面 编程 ， 将 日 志 、 安 全 、 事 务 管理 等 服务 (或 功能 ) 理 解 成 一 个 “方面 ” 
以 前 这 些 服务 通常 是 直接 写 在 业务 逻辑 的 代码 中 ， 这 有 两 个 缺点 : 首先 是 业务 逻辑 不 纯净 ， 
其 次 是 这 些 服务 被 很 多 业务 逻辑 反复 使 用 ， 不 能 做 到 复 用 。AOP 解决 了 上 述 问 题 ， 可 以 把 
这 些 服务 剥离 出 来 形成 一 个 “方面 ”， 可 以 实现 复 用 ; 然后 将 “方面 ”动态 地 插入 到 业务 逻 
辑 中 ， 让 业务 逻辑 能 够 方便 地 使 用 “方面 ”提供 的 服务 。 

其 他 还 有 一 些 特 点 但 不 是 Spring 的 核心 ， 例 如 对 JDBC 的 封装 与 简化 ， 提 供 事务 管理 
功能 ， 对 O/R mapping 工具 (Hibernate、MyBatis) 的 整合 ， 提 供 MVC 解决 方案 ; 也 可 以 与 其 
他 Web 框架 (Struts、JSF) 进 行 整 合 ， 还 有 对 JNDI、mail 等 服务 进行 封装 。 


2.1.3 Spring 的 体系 结构 


Spring 框架 (Spring Framework) 在 不 断 发 展 和 完善 , 目前 Spring 框架 由 20 个 功能 模块 构 
成 ， 这 些 模块 被 分 组 到 Core Container、Data Access/Integration、Web、AOP(Aspect Oriented 
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Programming)、Instrumentation、Messaging 和 Test 中 ，Spring Framework 包含 的 内 容 如 
图 2-1 所 示 。 


[oe | IE 9IET 
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2-1 Spring Framework 结构 


组 成 Spring 框架 的 每 个 模块 (或 组 件 ) 都 可 以 单独 存在 , 或 者 与 其 他 一 个 或 多 个 模块 联合 
实现 。 下 面 对 体系 结构 中 的 模块 作 简单 介绍 ， 有 具体 如 下 。 
(1) Core Container， 核 心 容器 提供 了 Spring 的 基本 功能 ， 是 其 他 模块 建立 的 基础 ， 它 主 
要 由 Beans 模块 、Core 模块 、Context 模块 和 Spring EL 模块 组 成 ， 介 绍 如 下 。 
@ ”Beans 模块 :提供 了 BeanFactory， 是 工厂 模式 实现 的 经 典 ，Spring 将 管理 对 象 称 
为 Bean。 
@ ”Core 核心 模块 : 提供 了 Spring 框架 的 基本 组 成 部 分 ， 包 括 IoC 和 DI 功能 。 
@ Context 上 下 文 模块 : 构建 于 核心 模块 之 上 , 它 是 访问 定义 配置 的 任何 对 象 的 媒介 。 
扩展 了 BeanFactory 的 功能 ， 其 中 ApplicationContext 是 Context 模块 的 核心 接口 。 
@ Spring EL 模块 : 是 Spring 3.0 后 新 增 的 模块 ， 提 供 了 Spring Expression Language 
支持 ， 是 运行 时 查询 和 操作 对 象 图 的 强大 的 表达 式 语 言 。 
(2) Data Access/Integration， 数 据 访问 /集成 层 包括 JDBC、ORM、OXM、JMS 和 
Transactions 模块 ， 介 绍 如 下 。 
@ JDBC 模块 : 提供 了 一 个 JDBC 的 抽象 层 ， 大 幅度 地 减少 了 在 开发 中 对 数据 库 的 操 
作 的 编码 。 
@ ORM 模块 : 提供 了 与 多 个 第 三 方 持久 层 框架 的 良好 整合 。 
@ OXM 模块 。 提 供 了 一 个 支持 对 象 /XML 映射 的 抽象 层 实现 ， 如 JAXB 、Castor、 
XMLBeans、JiBX 和 XStream。 
@ JMS 模块 。 指 Java 消息 传递 服务 ， 包 含 使 用 和 产生 消息 的 特性 ， 自 Spring 4.1 版 
本 以 后 ， 提 供 了 与 Spring-messaging 模块 的 集成 。 
@ Transactions 模块 : 支持 对 实现 特殊 接口 以 及 所 有 POJO 类 的 编程 和 声明 式 的 事务 
管理 。 
(3) Web，Web 层 包 括 WebSocket、Servlet、Web 和 Portlet 模块 ， 介 绍 如 下 。 
@ Web 模块 :提供 了 基础 的 针对 Web 开发 的 集成 特性 ， 例 如 多 方 文件 上 传 ， 利 用 
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Servlet 监听 器 进行 IoC 容器 初始 化 以 及 Web 应 用 上 下 文 。 

@ Servlet 模块 : 也 称 做 Spring-webmvec 模块 , 包含 Spring 的 模型 -视图 -控制 器 (MVC) 
和 REST Web Services 实现 的 Web 应 用 程序 。 

@ WebSocket 模块 : Spring 4.0 以 后 新 增 功能 ， 提 供 了 WebSocket 和 SockJS 的 实现 ， 
以 及 对 STOMP 的 支持 。 

@ Portlet 模块， 类似 Servlet 模块 的 功能 ， 提 供 了 Portlet 环境 下 的 MVC 实现 。 

(4) 其 他 模块 。 Spring 的 其 他 模块 还 有 AOP、 Aspects、Instrumentation、Messaging 以 

及 Test 模块 ， 介 绍 如 下 。 

@ AOP 模块 :提供 了 面向 方面 编程 的 支持 ， 人 允许 定义 方法 拦截 器 和 切入 点 ， 将 代码 
按照 功能 进行 分 离 ， 以 降低 耦合 性 。 

@ ”Aspects 模块 : 提供 了 与 AspectJ 的 集成 功能 ，AspectJ 是 一 个 功能 强大 且 成 熟 的 面 


向 方面 编程 的 框架 。 

@ Instrumentation 框架 : 提供 了 类 工具 的 支持 和 类 加 载 器 的 实现 ， 可 以 在 特定 的 应 用 
服务 器 中 使 用 。 

@ ”Messaging 模块 : Spring 4.0 以 后 新 增 的 模块 ， 提 供 了 对 消息 传递 体系 结构 和 协议 
的 支持 。 


@ Test 模块 : 提供 了 对 单元 测试 和 集成 测试 的 支持 。 
2.1.4 Spring 的 下 载 


前 面 说 过 ，Spring 的 第 一 个 版 本 在 2004 年 发 布 ， 经 过 10 多 年 的 发 展 ， 版 本 也 在 不 断 
升级 优化 。 本 书 编写 时 ，Spring 的 最 新 版 本 是 5.0.4， 本 书 的 代码 也 是 Spring 5.0.4 版 本 测试 
通过 ， 建 议 也 下 载 该 版 本 。 

Spring 是 一 个 独立 的 框架 , 它 不 需要 依赖 任何 Web 服务 器 或 容器 , 既 可 在 独立 的 Java SE 
项 目 中 使 用 ， 当 然 也 可 在 Java Web 项 目 中 使 用 。 下 载 Spring 框架 可 按 如 下 步骤 进行 。 

(1) 登录 https://repo.spring.io/webapp/#/artifacts/browse/tree/General/libs-release-local/ 或 
者 登录 http://repo.springsource.org/libs-release-local/， 依 次 进入 org 一 springframework 一 spring 
路 径 , 即 可 看 到 Spring 框架 各 版 本 压缩 包 的 下 载 链接 ,这 里 我 们 选择 RELEASE 5.0.4 版 本 ， 
单 击 spring-framework-5.0.4.RELEASE-dist.zip 下 载 该 文件 。 

(2) 下 载 完 成 后 ， 将 压缩 文件 解压 缩 后 得 到 一 个 名 为 spring-framework-5.0.4.RELEASE 
的 文件 夹 ， 目 录 结 构 如 图 2-2 所 示 。 

史 脑 ， Windows (D:) ， 资 源 包 下 载 > spring-framework-5.0.4.RELEASE 
和 修改 日 其 类型 大 小 
docs 
libs 
日 shema 
国 fcensebd 


国 notice.bt 
国 readmebd 
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@ docs 文件 夹 : 该 目录 下 存放 Spring 的 相关 文档 ， 包 括 开发 指南 、API 参考 文档 。 

@ libs 文件 夹 : 该 目录 下 包含 开发 所 需 的 jar 包 和 源码 。 打开 libs 目录 可 以 看 到 63 个 
jar 包 文件 。 分 为 三 类 ， 其 中 以 RELEASE.jar 结尾 的 是 Spring 框架 class 文件 的 jar 
包 ; 以 RELEASE-javadoc.jar 结尾 的 是 Spring 框架 API 文档 的 压缩 包 ; 以 
RELEASE-sources.jar 结尾 的 是 Spring 框架 源 文件 的 压缩 包 。 整 个 Spring 框架 由 21 
个 模块 组 成 ， 该 目录 下 Spring 为 每 个 模块 都 提供 了 三 个 压缩 包 。 

@ ”schema 文件 夹 : 该 目录 包含 Spring 各 种 配置 文件 的 XML Schema 文档 。 

@ readme.txt、notice.txt、license.txt 等 说 明 性 文档 。 

(3) 在 libs 目录 中 ， 有 四 个 Spring 的 基础 包 ， 分 别 对 应 Spring 核心 容器 的 四 个 模块 ; 
spring-core-5.04RELEASEjar 、 springbeans-504RELEASEjar 、 spring-context-5.04RELEASEjar 、 
spring-expression-5.0.4.RELEASE .jar。 

(4) 除 此 之 外 , 使 用 Spring 开发 ， 除 使 用 自 带 的 jar 包 外 , 还 要 依赖 于 commons-logging 
的 jar 包 文 件 ， 可 通过 http://commons.apache.org/proper/commons-logging/download logging.cgi 
网 址 下 载 。 下 载 完 成 得 到 一 个 commons-logging-1.2-bin.zip 压缩 包 。 将 该 压缩 包 解压 后 ， 即 
可 找到 commons-logging-1.2.jar 文件 。 


2.2 ”搭建 Spring 的 入 门 程序 


下 面 通过 示例 程序 来 演示 Spring 框架 的 简单 应 用 ， 其 中 只 用 到 了 Spring 框架 而 没有 使 
用 其 他 技术 ， 这 样 能 使 初学 者 更 加 容易 理解 。 实 现 步骤 如 下 。 

(1) 在 Eclipse 中 ， 创 建 一 个 名 为 spring-1 的 Java 项 目 ， 在 项 目 中 新 建文 件 夹 lb， 用 于 
存放 项 目 所 需 的 jar 包 。 

(2) 将 前 面 介绍 的 四 个 Spring 的 基础 包 ， 即 spring-core-5.0.4.RELEASE .jar、spring-beans- 
5.04RELEASEjar 、 spring-context-5.0.4RELEASEjar 、 spring-expression-5.04RELEASEjar 复制 到 
spring-1 项 目的 lib 目录 中 。 

(3) 将 Spring 依赖 的 日 志 包 commons-logging-1.2.jar 也 复制 到 lib 目录 中 。 

(4) 选中 该 项 目 lib 目录 下 的 所 有 jar 包 ， 右 击 并 选择 Build Path 一 Add to Build Path 命 
令 ， 将 这 些 jar 包 添 加 到 项 目的 构建 路 径 中 。 

(5) 在 spring-1 项 目 中 创建 com.ssm 包 ， 在 包 中 新 建 一 个 名 为 HelloSpring 的 类 。 

package com.ssm; 

public class HelloSpring { 

private String userName; 
public void setUserName (String userName) { 
this.userName = userName; 
» 
public void show() { 
System.out .println (userName + ": 欢迎 您 来 学 习 spring 框架 "); 
} 
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(6) 在 项 目的 src 目录 下 创建 applicationContext.xml 文件 ， 内 容 如 下 : 


<?xml] version="1.0" encoding="UTF-8"?> 


<beans xmlns="http://www.springframework.org/schema/beans" 


xmlns:xsi="http://www.w3.0rg/2001/xMLSchema-instance" 
xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd"> 

<!-- 配置 一 个 bean， 将 指定 类 配置 给 spring， 让 Spring 创建 其 对 象 的 实例 --> 
<bean id="hellospring" class="com.ssm.HelloSpring"> 

<!-- 为 属性 赋值 --> 

<property name="userName" value=" 张 三 "></property> 
</bean> 

</beans> 


在 applicationContext.xml 文件 中 ， 通 过 <bean> 元 素来 实例 化 HelloSpring 类 ，id 属性 用 
来 标识 实例 名 helloSpring，class 属性 指定 待 实例 化 的 全 路 径 类 名 com.ssm.HelloSpring。 子 
元 素 <property> 用 来 为 类 中 的 属性 赋值 ，name 属性 指定 HelloSpring 类 中 的 属性 userName， 
value 属性 给 userName 指定 了 值 “ 张 三 ”。 

在 applicationContext.xml 文件 中 ， 第 2 一 5 行 代码 是 Spring 的 约束 配置 ， 该 配置 信息 不 
需要 读者 手写 ， 可 以 在 Spring 的 帮助 文档 中 找到 ， 方 法 如 下 : 

打开 Spring 解压 文件 夹 中 的 docs 目录 ， 在 spring-framework-reference 文件 夹 下 打开 
html5 文件 来， 找到 index.html 文件 ， 使 用 浏览 器 打开 该 mdex.html 文件 ， 单 击 Core 链接 进 
入 ,在 Table of Contents 下 ,找到 1.The IoC container 一 1.2.Container overview 一 1.2.1.Configuration 
metadata 目录 , 即 可 找到 配置 文件 的 约束 信息 , 这 里 我 们 只 需 将 信息 复制 到 项 目的 配置 文件 
中 使 用 即 可 ， 如 图 2-3 所 示 。 
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2-3 配置 文件 的 约束 信息 


注意 : 在 学 习 每 一 章 时 ， 如 果 涉 及 配置 文件 的 约束 信息 ， 可 以 将 相应 章节 源 代码 中 的 配置 
文件 约束 信息 复制 过 来 直接 使 用 。 
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(7) 在 com.ssm 包 中 创建 测试 类 TestHelloSpring， 在 main0 方 法 中 ， 需 要 初始 化 Spring 
容器 ， 并 加 载 applicationContext.xml 配置 文件 ， 通 过 Spring 容器 获取 HelloSpring 类 的 
helloSpring 实例 ( 即 Java 对 象 )， 然 后 调用 类 中 的 show0 方 法 在 控制 台 输 出 信息 。 


Package com.ssm; 


import org.springframework.context.ApplicationContext; 
import 
org.springframework.context.support.ClassPathxmlApplicationContext; 
public class TestHellospring { 
public static void main(String[] args) { 
// 初始 化 spring 容器， 加载 applicationContext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 通过 容器 获取 配置 中 hellospring 的 实例 
HelloSpring helloSpring = (HelloSpring) ctx.getBean 
("hellospring"); 
hellospring.show();// 调用 方法 
} 
} 


执行 测试 类 TestHelloSpring， 控 制 台 输出 如 下 : 
张 三 ， 欢迎 您 来 学 习 spring 框架 


从 运行 结果 可 以 看 出 ， 控 制 台 已 成 功 输 出 了 HelloSpring 类 中 show0 方 法 的 输出 语句 。 
在 main0 方 法 中 ， 并 没有 通过 new 关键 字 创 建 HelloSpring 类 的 对 象 ， 而 是 通过 Spring 容器 
获取 实现 类 对 象 ， 这 就 是 Spring IoC 容器 的 实现 机 制 。 


2.3 Spring 的 核心 机 制 : 依赖 注入 /控制 反 转 
2.3.1 ”依赖 注入 的 概念 


Spring 的 核心 机 制 就 是 IoC( 控 制 反 转 ) 容 器 , IoC 的 另外 一 个 称呼 是 依赖 注入 (DD), 这 两 
个 称呼 是 从 两 个 角度 描述 的 同一 个 概念 。IoC 是 一 个 重要 的 面向 对 象 编程 的 法 则 ,用 来 削减 
计算 机 程序 的 耦合 问题 ， 也 是 轻 量 级 的 Spring 框架 的 核心 。 通 过 依赖 注入 ，Java EE 应 用 中 
的 各 种 组 件 不 需要 以 硬 编码 的 方法 进行 耦合 ， 当 一 个 Java 实例 需要 其 他 Java 实例 时 ， 系 统 
自动 提供 需要 的 实例 ， 无 需 程序 显 式 获取 。 因 此 ， 依 赖 注入 实现 了 组 件 之 间 的 解 看 。 

依赖 注入 和 控制 反 转 含义 相同 ， 当 某 个 Java 对 象 (调用 者 ) 需 要 调用 另 一 个 Java 对 象 (被 
调用 者 ， 即 被 依赖 对 象 ) 时 ， 传 统 的 方法 是 由 调用 者 采用 “new 被 调用 者 ”的 方式 来 创建 对 
象 ， 这 种 方式 会 导致 调用 者 和 被 调用 者 之 间 的 耦合 性 增加 ， 对 项 目的 后 期 升级 和 维护 不 利 。 

在 使 用 Spring 框架 后 ,对 象 的 实例 不 再 由 调用 者 创建 ,而 是 由 Spring 容器 来 创建 , Spring 
容器 会 负责 控制 程序 之 间 的 关系 ， 而 不 是 由 调用 者 的 程序 代码 直接 控制 。 这 样 ， 控 制 权 由 
应 用 程序 代码 转移 到 了 Spring 容器 ， 控 制 权 发 生 了 反 转 ， 这 就 是 Spring 的 控制 反 转 。 

从 Spring 容器 的 角度 来 看 ，Spring 容器 负责 将 被 依赖 对 象 赋值 给 调用 者 的 成 员 变量 ， 
这 就 相当 于 为 调用 者 注入 了 它 依赖 的 实例 ， 这 就 是 Spring 的 依赖 注入 。 
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Spring 提倡 面向 接口 的 编程 ， 依 赖 注入 的 基本 思想 是 : 明确 地 定义 组 件 接口 ， 独 立 开 
发 各 个 组 件 ， 然 后 根据 组 件 的 依赖 关系 组 装运 行 。 


2.3.2 ”依赖 注入 的 类 型 


依赖 注入 的 作用 就 是 使 用 Spring 框架 创建 对 象 时 ， 动 态 地 将 其 所 依赖 的 对 象 注 入 到 
Bean 组 件 中 ， 其 实现 主要 有 两 种 方式 ， 一 种 是 构造 方法 注入 ， 另 一 种 是 属性 setter 方法 注 
入 。 具 体 介 绍 如 下 。 


1. 构造 方法 注入 


构造 方法 注入 是 指 Spring 容器 使 用 构造 方法 注入 被 依赖 的 实例 ， 构 造 方法 可 以 是 有 参 
的 或 者 是 无 参 的 。 在 大 多 数 情况 下 ， 我 们 都 是 通过 构造 方法 来 创建 类 对 象 ，Spring 也 可 以 
采用 反射 的 方式 ， 通 过 使 用 带 参数 的 构造 方法 来 完成 注入 ， 每 个 参数 代表 一 个 依赖 ， 这 就 
是 构造 方法 注入 的 原理 。 这 种 注入 方式 ， 如 果 参 数 比较 少 ， 可 读 性 还 是 不 错 的 ， 但 若 参数 
很 多 ， 那 么 这 种 构造 方法 就 比较 复杂 了 ， 这 个 时 候 应 该 考虑 属性 setter 方法 注入 。 
下 面 通过 示例 来 讲解 构造 方法 注入 。 在 spring-1 项 目 中 ， 在 com.ssm.entity 的 包 中 ， 新 
建 AdminInfo 类 ， 包 括 id、name、pwd 三 个 属性 ， 其 中 id 属性 使 用 setter 方法 注入 ，name 
和 pwd 属性 使 用 构造 方法 注入 ， 新 建 带 两 个 参数 的 构造 方法 ， 代 码 如 下 : 
Package com.ssm.entity; 
Public class AdminInfo { 
private int id; 
private String name; 
private String pwd; 


public void setId(int id) { 
this.id = id; 


3 

// 省 略 原 有 getter/setter 方法 

public AdminInfo() { 

Public AdminInfo (String name, String pwd) { 
this.name = name; 
this.pwd = pwd; 

} 

Public void print(){ 
SYstem.out.println(id+"”-- "+ name + " -- "+pwd) 7 

i 

} 


使 用 setter 方法 注入 时 , Spring 通过 JavaBean 的 无 参 构造 方法 实例 化 对 象 。 当 编写 带 参 
数 构造 方法 后 ，Java 虚拟 机 不 会 再 提供 默认 的 无 参 构造 方法 。 为 了 保证 使 用 的 灵活 性 ， 建 
议 自 行 添加 一 个 无 参 构造 方法 。 

修改 Spring 的 配置 文件 applicationContext.xml， 添 加 代码 如 下 : 


<bean id="adminIinfo" class="com.ssm.entity.AdminIinfo"> 
<property name="id" value="5"></property> 
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<constructor-arg name="name" value="admin"/> 


<constructor-arg name="pwd" value="123456"/> 
</bean> 


一 个 <constructor-arg> 元 素 表示 构造 方法 的 一 个 参数 ， 且 使 用 时 不 区 分 顺序 。 当 构造 方 
法 的 参数 出 现 混淆 ， 无 法 区 分 时 ， 可 通过 <constructor-arg> 元 素 的 index 属性 指定 该 参数 的 
位 置 索 引 ， 索 引 从 0 开始 。<constructor-are> 元 素 还 提供 了 type 属性 用 来 指定 参数 的 类 型 ， 
避免 字符 串 和 基本 数据 类 型 的 混淆 。 
新 建 测试 类 TestSpringConstructor， 代 码 如 下 。 
Public class TestSpringConstructor { 
public static void main(String[] args) { 
// 加 载 applicationcontext.xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 获取 配置 中 的 adminInfo 实例 
AdminInfo adminInfo = (AdminInfo)ctx.getBean("adminInfo"); 
adminInfo.print (); 
} 
} 


运行 测试 类 ， 控 制 台 的 运行 结果 为 “5 -- admin -- 123456”， 通 过 调用 AdminInfo 类 中 
的 print() 方 法 ， 打 印 输出 AdminInfo 类 中 的 属性 值 ， 属 性 值 通过 在 applicationContext.xml 的 
配置 文件 中 注入 实现 。 


2. 属性 setter 方法 注入 


属性 setter 方法 注入 是 指 Spring 容器 使 用 setter 方法 注入 被 依赖 的 值 或 对 象 ， 是 常见 的 
一 种 依赖 注入 方式 ， 这 种 注入 方式 具有 高 度 灵活 性 。 属 性 setter 方法 注入 要 求 Bean 提供 一 
个 默认 的 构造 方法 ， 并 为 需要 注入 的 属性 提供 对 应 的 setter 方法 。Spring 先 调用 Bean 的 默 
认 构 造 方法 实例 化 Bean, 然后 通过 反射 的 方式 调用 setter 方 法 注入 属性 值 . 这 种 方式 是 Spring 
最 主要 的 方式 ， 在 实际 工作 中 使 用 广泛 。 在 前 面 2.2 小 节 的 示例 中 ，userName 属性 就 是 采 
用 属性 setter 方法 注入 实现 的 。 
Spring 配置 文件 从 2.0 版 本 开始 采用 schema 形式 ， 使 用 不 同 的 命名 空间 管理 不 同类 型 
的 配置 ， 使 得 配置 文件 更 具 扩 展 性 。Spring 基于 schema 的 配置 方案 为 许多 领域 的 问题 提供 
了 简化 的 配置 方法 ， 大 大 降低 了 配置 的 工作 量 。 下 面 讲解 使 用 p 命名 空间 来 简化 属性 的 注 
入 ， 使 用 前 要 先 添加 p 命名 空间 的 声明 ， 配 置 文件 中 的 关键 代码 如 下 。 
<?xml] version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.0rg/2001/xXMLSchema-instance" 
xmlns:p="http://www.springframework.org/schema/p™" 


xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd"> 
<!-- 使 用 p 命名 空间 法 注入 值 --> 
<bean id="admin" class="com.ssm.entity.AdminIinfo" p:id="8" 
p:name="yzpc" p:pwd="yzpc" /> 
</beans> 
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为 AdminInfo 类 中 的 name 和 pwd 属性 添加 相应 的 setter 方法 ， 并 修改 
TestSpringConstructor 测试 类 ， 测 试 类 的 代码 修改 部 分 如 下 : 
// 获取 配置 中 的 AdminInfo 实例 
AdminInfo admin = (AdminInfo)ctx.getBean("admin"); 
// 调用 print 方法 
admin.print(); 
运行 测试 类 ， 控 制 台 的 运行 结果 为 “8 -- yzpe -- yzpe”， 使 用 p 命名 空间 简化 配置 的 效 
果 很 明显 ， 其 使 用 方式 总 结 如 下 。 
ee 对 于 直接 量 (基本 数据 类 型 、 字 符 串 ) 属 性 ， 使 用 方式 如 下 : p: 属 性 名 =" 属 性 值 "。 
@ ”对 于 引用 Bean 的 属性 ， 使 用 方式 如 下 : p: 属 性 名 -re 全 "Bean 的 id"。 


3. 两 种 注入 方式 的 对 比 


中 可 以 根据 实际 需要 灵活 选择 ， 两 种 方式 的 特点 总 结 如 下 。 

@ ”使 用 setter 方法 时 ， 与 传统 的 JavaBean 写法 更 类 似 ， 程 序 开发 人 员 更 容易 了 解 和 
接受 ， 通 过 setter 方法 设 定 依 赖 关 系 显得 更 加 直观 、 自 然 。 

@ ”对 于 复杂 的 依赖 关系 ， 如 果 采 用 构造 方法 注入 ， 会 导致 构造 器 过 于 爱 肿 ， 难 以 阅 
读 。 尤 其 是 在 某 些 属性 可 选 的 情况 下 ， 多 参数 的 构造 器 更 加 笨重 。 

@ ”构造 方法 注入 可 以 在 构造 器 中 决定 依赖 关系 的 注入 顺序 ， 当 某 些 属性 的 赋值 操作 
有 先后 顺序 时 ， 这 点 尤为 重要 。 

@ ”对 于 依赖 关系 无 须 变化 的 Bean， 构 造 方法 注入 更 有 用 处 。 如 果 没 有 setter 方法 ， 
所 有 的 依赖 关系 全 部 在 构造 器 内 设 定 ， 后 续 代 码 不 会 对 依赖 关系 产生 破坏 。 依 赖 
关系 只 能 在 构造 器 中 设 定 ， 所 以 只 有 组 件 的 创建 者 才能 改变 组 件 的 依赖 关系 。 而 
对 组 件 的 调用 者 而 言 ， 组 件 内 部 的 依赖 关系 完全 透明 ， 更 符合 高 内 聚 的 原则 。 


2.3.3 ”依赖 注入 的 示例 


了 解 两 种 注入 方式 后 ， 下 面 以 属性 setter 方法 注入 为 例 ， 实 现 一 个 简单 的 登录 验证 ， 下 
面 讲解 Spring 容器 在 程序 中 是 如 何 实现 依赖 注入 的 。 

(1) 将 项 目 spring-1 复制 并 重 命名 为 “spring-2”， 再 导入 到 Eclipse 开发 环境 中 。 

(2) 编写 DAO 层 。 

在 项 目 spring-2 的 src 目录 下 ,新 建 包 com.ssm.dao, 在 包 中 新 建 一 个 接口 UserDAO.java， 
在 接口 中 添加 方法 login0， 代 码 如 下 : 

Package com.ssm.dao; 

Public interface UserDAO { 

public boolean login(String loginName,String loginPwd); 

创建 接口 UserDAO 的 实现 类 UserDAOImpl， 新 建 包 com.ssm.dao.impl， 创 建 接口 

UserDAO 的 实现 类 UserDAOImpl， 实 现 login0 方 法 ， 代 码 如 下 : 


Package com.ssm.dao.impl; 
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import com.ssm.dao.UserDAO; 


Public class UserDAOImpl implements UserDAO { 
@override 
public boolean login (String loginName, String loginpwd) { 
if (loginName.equals ("admin") && loginPwd.equals ("123456")){ 
return true; 


i 


return false; 


} 


在 登录 验证 时 为 了 简化 DAO 层 代 码 ， 和 暂时 没有 用 到 数据 库 。 如 果 用 户 名 为 “admin”， 
密码 为 “123456”， 则 登录 成 功 。 

(3) 编写 Service 层 。 

在 src 目录 下 新 建 包 com. ssm.service, 在 包 中 新 建 一 个 接口 UserServicejava, 在 接口 中 
添加 方法 login0， 代 码 如 下 : 

Package com.ssm.service; 

public interface UserService { 


public boolean login(string loginName,Sstring loginpwd); 
} 


创建 接口 UserService 的 实现 类 UserServiceImpljava， 存 放 在 com.ssm.service.impl 包 中 ， 
实现 login0 方 法 ， 代 码 如 下 : 


package com.ssm.service.impl; 

import com.ssm.dao.UserDAO; 

import com.ssm.service.UserService; 

public class UserServiceImpl implements UserServicel{ 


// 使 用 接口 UserDAo 声明 对 象 ， 添 加 setter 方法 ， 用 于 依赖 注入 

UserDAO userDAO; 

public void setUserDAO(UserDAO userDAO) { 
this.userDRO = userDAO; 

3 

// 实现 接口 中 的 方法 

@Override 

public boolean login(string loginName, String loginPwd) { 
// 调 用 userDao 中 的 1ogin () 方 法 


return userDAO.login(loginName, loginPwd); 


} 


在 上 述 代码 中 , 没有 采用 传统 的 new UserDAOImp10 方 式 获取 数据 访问 层 UserDAOImpl 
类 的 实例 ， 只 是 使 用 UserDAO 接口 声明 了 对 象 userDAO， 并 为 其 添加 setter 方法 ， 用 于 依 
赖 注入 。UserDAOImpl 类 的 实例 化 和 对 象 userDAO 的 注入 将 在 applicationContext.xml 配置 


文件 中 完成 。 
(4) 配置 applicationContext.xml 文件 。 
创建 UserDAOImpl 类 和 UserServiceImpl 类 的 实例 ,需要 添加 <bean> 标 记 ， 并 配置 其 相 
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关 属性 ， 代 码 如 下 : 
<!-- 配置 创建 UserDRAoITmpl 的 实例 --> 


<bean id="userDAO" class="com.ssm.dao.impl.UserDAOImpl"></bean> 

<!-- 配置 创建 UserServiceImpl 的 实例 --> 

<bean id="userService" class="com.ssm.service.impl.UserServiceImpl"> 
<!-- 属性 setter 方法 依赖 注入 数据 访问 层 组 件 --> 
<property name="userDAO" ref="userDAO" /> 

</bean> 


<bean> 元 素 用 来 定义 Bean 的 实例 化 信息 ，class 属性 指定 类 全 名 ( 包 名 + 类 名 )，id 属性 
指定 生成 的 Bean 实例 名 称 。 上 述 配 置 中 ， 首 先 通过 一 个 <bean> 元 素 创 建 UserDAOImpl 类 
的 实例 , 在 使 用 另 一 个 <bean> 元 素 创建 UserServiceImpl 类 的 实例 时 , 使 用 了 <property> 元 素 ， 
该 元 素 是 <bean> 元 素 的 子 元 素 , 用 于 调用 Bean 实例 中 的 相关 setter 方法 完成 属性 值 的 赋值 ， 
从 而 实现 依赖 关系 的 注入 。<property> 元 素 中 的 name 属性 指定 Bean 实例 中 的 相应 属性 的 名 
称 ， 这 里 将 name 属性 设置 为 userDAO， 代 表 UserServiceImpl 类 中 的 userDAO 属性 需要 注 
入 值 .name 属性 的 值 可 以 通过 ref 属性 或 者 value 属性 指定 。 当 使 用 ref 属性 时 ,表示 对 Spring 
IOC 容器 中 某 个 Bean 实例 的 引用 。 这 里 引用 了 前 一 个 <bean> 元 素 中 创建 的 UserDAOImpl 
类 的 实例 userDAO， 并 将 该 实例 赋值 给 UserServiceImpl 类 中 的 userDAO 属性 ， 从 而 实现 了 
依赖 关系 的 注入 。UserServiceImpl 类 的 userDAO 属性 值 是 通过 调用 setUserDAO() 方 法 完成 
注入 的 ， 这 种 注入 方式 称 为 设 值 注入 ， 设 值 注入 方式 是 Spring 推荐 使 用 的 。 

(5) 编写 测试 类 。 

在 com.ssm 包 中 创建 测试 类 TestSpringDI， 代 码 如 下 : 


Package com.ssm; 
import org.springframework.context.ApplicationContext; 
import 
org.springframework.context.support.ClassPathxmlApplicationContext; 
import com.ssm.service.UserService; 
public class TestSpringDI { 
public static void main(String[] args) { 
// 加 载 applicationcontext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 获取 配置 中 的 UsersserviceImpl 实例 
UserService userService = (UserService) ctx.getBean ("userSerVice") 7 
boolean flag = userService.login("admin", "123456"); 


if (flag) { 
System.out.println ("登录 成 功 "); 
} else { 


System.out.println( "登录 失败 ") ; 
} 


} 


在 测试 类 TestSpringDI 中 ， 首 先 通 过 ClassPathXmlApplicationContext 类 加 载 Spring 配 
置 文件 applicationContextxml， 然 后 从 配置 文件 中 获取 UserServiceImpl 类 的 实例 ， 最 后 调 
用 login( 方 法 。 运 行 测试 类 ， 当 用 户 名 为 “admin”、 密 码 为 “123456” 时 ， 控 制 台 输出 “ 登 
录 成 功 ”， 否 则 输出 “登录 失败 ”。 
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24 小 结 


本 章 主 要 介绍 了 Spring 框架 入 门 的 一 些 基础 知识 。 首 先 讲解 了 Spring 框架 的 概念 、 优 
点 、 体 系 结构 以 及 下 载 方法 和 下 载 后 的 目录 结构 ; 然后 通过 一 个 简单 的 HelloSpring 入 门 程 
序 演示 Spring 框架 的 简单 应 用 , 并 演示 了 依赖 注入 中 的 构造 方法 注入 和 属性 setter 方 法 注入 ; 
最 后 以 登录 验证 为 例 ， 讲 述 了 Spring 的 核心 机 制 : 依赖 注入 /控制 反 转 。 
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作为 Spring 核心 机 制 的 依赖 注入 /控制 反 转 ， 改 变 了 传统 编程 习惯 ， 对 组 件 的 实例 化 不 
再 由 应 用 程序 完成 ， 转 而 交 由 Spring 容器 完成 ， 需 要 时 注入 到 应 用 程序 中 ， 从 而 将 组 件 之 
间 的 依赖 关系 进行 了 解 碍 。 这 一 切 都 离 不 开 Spring 配置 文件 中 使 用 的 <bean> 元 素 ， 下 面 我 
们 来 深入 学 习 Spring 中 的 Bean。 


3.1 Spring IoC 容器 
Spring 框架 的 主要 功能 是 通过 其 IoC 容器 来 实现 的 ， 它 可 以 容纳 我 们 所 开发 的 各 种 
Bean， 并 且 我 们 可 以 从 中 获取 各 种 发 布 在 Spring IoC 容器 里 的 Bean, 并 且 通 过 描述 得 到 它 。 
Spring IoC 容器 的 设计 主要 基于 BeanFactory 和 ApplicationContext 两 个 接口 。 
3.1.1 Bean I BeanFactory 


Sg IoC dete E 
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某 些 特定 接口 ， 这 极 大 地 提高 了 IoC 容器 的 可 用 性 。 

BeanFactory 接口 提供 了 几 个 实现 类 ,其 中 最 常用 的 是 org.springframework.beans.factory. 
xml.XmlBeanFactory， 会 根据 XML 配置 文件 中 的 定义 来 装配 Bean， 加 载 配 置信 息 的 语法 
如 下 : 


BeanFactory beanFactory=new XmlBeanFactory (new FileSystemResource("D:/bean.xml")); 


这 种 加 载 方式 在 实际 开发 中 并 不 多 见 ， 读 者 了 解 即 可 。 


3.1.2 Bean 工厂 ApplicationContext 


ApplicationContext 是 BeanFactory 的 子 接口 之 一 , 换 句 话说 ,BeanFactory 是 Spring IoC 
容器 所 定义 的 最 底层 接口 ， 而 ApplicationContext 是 其 高 级 接口 之 一 ， 并 且 对 BeanFactory 
功能 做 了 许多 有 用 的 扩展 ， 还 添加 了 对 国际 化 、 资 源 访问 、 事 件 传播 等 方面 的 支持 ， 使 之 
成 为 Java EE 应 用 中 首选 的 IoC 容器 ， 可 应 用 在 Java APP 和 Java Web 中 。 所 以 在 大 部 分 的 
工作 场景 下 ， 都 会 使 用 ApplicationContext 作为 Spring IoC 容器 。 

ApplicationContext 的 中 文 含 义 是 “应 用 上 下 文 ”， 它 继承 自 BeanFactory 接口 。 
ApplicationContext 接口 有 三 个 常用 的 实现 类 ， 如 下 所 示 : 

@ ClassPathXmlApplicationContext 

ClassPathXmlApplicationContext 类 从 类 路 径 ClassPath 中 寻找 指定 的 XML 配置 文件 ， 
找到 并 装载 ApplicationContext 的 实例 化 工作 。 例 如 : 

ApplicationContext context=new ClassPathXmlApplicationContext (String 
configLocation); 

configLocation 参数 指定 Spring 配置 文件 的 名 称 和 位 置 ， 如 "applicationContext.xml"。 

@ FileSystemXmlApplicationContext 

FileSystemXmlApplicationContext 类 从 指定 的 文件 系统 路 径 中 寻找 指定 的 XML 配置 文 
找到 并 装载 ApplicationContext 的 实例 化 工作 。 例 如 : 

ApplicationContext context=new FileSystemxXxmlApplicationContext (String 
configLocation); 

其 与 ClassPathXmlApplicationContext 的 区 别 在 于 读 取 Spring 配置 文件 的 方式 ， 
FileSystemXmlApplicationContext 不 再 从 类 路 径 中 读 取 配置 文件 ， 而 是 通过 参数 指定 配置 文 
件 的 位 置 ， 可 以 获取 类 路 径 之 外 的 资源 。 这 种 绝对 路 径 的 方式 ， 会 导致 程序 的 灵活 性 变 差 ， 
所 以 这 个 方法 一 般 不 推荐 使 用 。 

@ XmlWebApplicationContext 

XmlWebApplicationContext 类 从 Web 系统 中 的 XML 文件 载 入 Bean 定义 的 信息 ，Web 
应 用 寻找 指定 的 XML 配置 文件 ， 找 到 并 装载 完成 ApplicationContext 的 实例 化 工作 ， 例 如 : 


ServletContext servletContext = equest .getSession() .getServletContext () 7 


祝 


ApplicationContext ctx = 
WebApplicationContextUtils.getWebApplicationContext (servletContext); 
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在 使 用 Spring 框架 时 ， 可 通过 实例 化 其 中 的 任何 一 个 类 来 创建 Spring 的 
ApplicationContext 容器 ， 这 些 实现 类 的 主要 区 别 在 于 装载 Spring 配置 文件 实例 化 
ApplicationContext 容器 的 方式 不 同 ， 在 实例 化 ApplicationContext 之 后 ， 同 样 通过 getBean 
方法 从 ApplicationContext 容器 中 获取 装配 好 的 Bean 实例 以 供 使 用 。 

在 Java 项 目 中 通过 ClassPathXmlApplicationContext 类 手工 实例 化 ApplicationContext 
容器 通常 是 不 二 之 选 , 但 对 于 Web 项 目 就 不 行 了 。Web 项 目的 启动 是 由 相应 的 Web 服务 器 
负责 的 , 因此 在 Web 项 目 中 , ApplicationContext 容器 的 实例 化 工作 最 好 交 给 Web 服务 器 来 
完成 ，Spring 为 此 提供 了 如 下 两 种 方式 : 


1. 基于 ContextLoaderListener 实现 


这 种 方式 只 适用 于 Servlet 2.4 及 以 上 规范 的 Servlet， 需 要 在 web.xml 中 添加 如 下 代码 : 
<!-- 指定 spring 配置 文件 的 位 置 ， 多 个 配置 文件 以 逗号 分 隔 --> 


<context-param> 
<param-name>contextConfigLocation</param-name> 
<param-value>classpath:applicationContext.xml</param-value> 
</context-param> 
<!-- 指定 以 contextLoaderListener 方式 启动 Spring 容器 --> 
<listener> 


<listener-class> 
org.springframework.web.context.ContextLoaderListener 
</listener-class> 
</listener> 


2. 基于 ContextLoaderServlet 实现 


该 方式 需要 在 web.xml 中 添加 如 下 代码 : 
<!-- 指定 spring 配置 文件 的 位 置 ， 多 个 配置 文件 以 逗号 分 隔 --> 


<context-param> 
<param-name>contextConfigLocation</param-name> 
<param-value>classpath:applicationContext.xml</param-value> 
</context-param> 
<!-- 指定 以 servlet 方式 启动 Spring 容器 --> 
<servlet> 
<servlet-name>context</servlet-name> 
<servlet-class> 
org.springframework.web.context.ContextLoaderServlet 
</servlet-class> 
<load-on-startup>1</lo0ad-on-startup> 
</servlet> 


在 本 书后 面 章节 中 讲解 三 大 框架 Spring、MyBatis 与 Spring MVC 的 整合 开发 时 ， 将 采 
用 基于 ContextLoaderListener 的 方式 来 实现 由 Web 服务 器 实例 化 ApplicationContext 容器 。 


3.2” Bean 的 配置 


Spring 容器 支持 XML 和 Properties 两 种 格式 的 配置 文件 ， 在 实际 开发 中 ， 最 常用 的 就 
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是 XML 格式 的 配置 方式 。 这 种 配置 方式 通过 XML 文件 来 注册 并 管理 Bean 之 间 的 依赖 关 
系 。 在 Spring 中 , XML 配置 文件 的 根 元 素 是 <beans>， 其 下 包含 <bean> 子 元 素 ， 每 个 <bean> 
子 元 素 定义 一 个 Bean， 并 描述 该 Bean 如 何 被 装配 到 Spring 容器 中 。 
<bean> 元 素 中 包含 多 个 属性 ， 其 常用 属性 介绍 如 下 。 
@ id: 容器 中 Bean 的 唯一 标识 符 , Spring 容器 对 Bean 的 配置 、 管 理 通过 该 属性 完成 ， 
装配 Bean 时 根据 id 值 获取 对 象 。 
@ name: Spring 容器 同样 可 以 通过 此 属性 对 容器 中 的 Bean 进行 配置 和 管理 ，name 
属性 可 以 为 Bean 指定 多 个 名 称 ， 每 个 名 称 之 间 用 逗号 或 分 号 隔 开 。 
@ class: 该 属性 指定 Bean 的 具体 实现 类 ， 使 用 对 象 所 在 类 的 全 路 径 。 
@ scope: 设 定 Bean 实例 的 作用 范围 , 其 属性 值 有 : singleton( 单 例 )、prototype( 原 型 )、 
request、session、globalSession、application 和 webSocket。 
<bean> 元 素 中 同样 包含 多 个 子 元 素 ， 其 子 元 素 介绍 如 下 。 
@ constructor-arg: 可 以 使 用 此 元 素 传 入 构造 方法 的 参数 进行 实例 化 。 该 元 素 的 index 
属性 设置 构造 参数 的 序号 (从 0 开始 )，type 属性 指定 构造 参数 类 型 ， 参数 值 可 通 
过 ref 属性 或 value 属性 直接 指定 ， 也 可 通过 ref 或 value 子 元 素 指定 。 
@ ”property: 用 调用 Bean 实例 中 的 setter 方法 完成 属性 赋值 ， 从 而 完成 依赖 注入 。 该 
元 素 的 name 属性 指定 Bean 实例 中 的 相应 属性 名 ，ref 属性 或 value 属性 用 于 指定 
参数 值 。 
@ ref: <property>、<constructor-arg> 等 元 素 的 属性 或 子 元 素 ， 可 用 于 指定 对 Bean 工 
厂 中 某 个 Bean 实例 的 引用 。 
@ value: <property>、<constructor-are> 等 元 素 的 属性 或 子 元 素 ， 可 直接 用 于 指定 一 
个 常量 值 。 
@ “list: <property> 等 元 素 的 子 元 素 ， 指 定 bean 的 属性 类 型 为 List 或 数组 类 型 的 属 
性 值 。 
@ set: <property> 等 元 素 的 子 元 素 ， 指 定 bean 的 属性 类 型 为 Set 类 型 的 属性 值 。 
e@ map: <property> 等 元 素 的 子 元 素 ， 指 定 bean 的 属性 类 型 为 Map 的 属性 值 。 
e@ entry: <map> 元 素 的 子 元 素 , 用 于 设置 一 个 键 值 对 。 其 key 属性 指定 字符 串 类 型 的 
键 值 ， 可 用 ref 或 value 子 元 素 指定 其 值 ， 也 可 通过 value-ref 或 value 属性 指定 
其 值 。 
在 XML 配置 文件 中 ， 通 常 一 个 普通 的 Bean 只 需 定义 id( 或 者 name) 和 class 两 个 属性 。 
定义 Bean 的 示例 代码 如 下 : 


<?xml] Version="1.0"” encoding="UTF-8"?> 

<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.0rg/2001/xMLSchema-instance" 
xsi:schemaLocation="http://www.springframework.org/schema/beans 

http://www.springframework.org/schema/beans/spring-beans.xsd"> 

<!-- 使 用 ia 属性 定义 bean1， 其 对 应 的 实现 类 为 com. ssm.Beanl --> 
<bean id="beanl" class="com.ssm.Beanl"> 
</bean> 
<!-- 使 用 name 属性 定义 bean2， 其 对 应 的 实现 类 为 com. ssm.Bean2 --> 
<bean name="bean2" class="com.ssm.Bean2" /> 

</beans> 
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上 述 代码 中 ,分 别 使 用 id 属性 和 name 属性 定义 了 两 个 Bean， 并 使 用 class 元 素 指定 其 
对 应 的 实现 类 。 如 果 在 Bean 中 未 指定 id 和 name 属性 , 则 Spring 会 将 class 值 作为 id 使 用 。 


3.3 Bean 的 作用 域 


容器 最 重要 的 任务 是 创建 并 管理 JavaBean 的 生命 周期 , 创建 Bean 之 后 , 需要 了 解 Bean 
在 容器 中 是 如 何在 不 同 作 用 域 下 工作 的 。 
Bean 的 作用 域 就 是 指 Bean 实例 的 生存 空间 或 有 效 范围 ，Spring 为 Bean 实例 定义 了 多 
种 作用 域 来 满足 不 同情 况 下 的 应 用 需求 ， 如 下 所 示 。 
@ singleton: 在 每 个 Spring IoC 容器 中 ， 一 个 bean 定义 对 应 一 个 对 象 实例 。 
@ prototype: 一 个 bean 定义 对 应 多 个 对 象 实例 。 
@ request: 在 一 次 Http 请 求 中 ， 容 器 会 返回 该 Bean 的 同一 个 实例 ， 而 对 于 不 同 的 用 
户 请 求 ， 会 返回 不 同 的 实例 。 该 作用 域 仅 在 基于 web 的 Spring ApplicationContext 
情形 下 有 效 。 
@ session: 在 一 次 HTTP Session 中 ， 容 器 会 返回 该 Bean 的 同一 个 实例 。 而 对 于 不 同 
的 HTTP Session 请 求 ， 会 返回 不 同 的 实例 。 该 作用 域 仅 在 基于 web 的 Spring 
ApplicationContext 情形 下 有 效 。 
@ ”global session: 在 一 个 全 局 的 HTTP Session 中, 容器 会 返回 该 Bean 的 同一 个 实例 。 
仅 在 使 用 portlet context 时 有 效 。 
下 面 通过 示例 来 具体 介绍 单 实 例 作用 域 和 原型 模式 作用 域 。 


1. singleton( 单 实例 ) 作 用 域 


这 是 Spring 容器 默认 的 作用 域 ， 当 一 个 Bean 的 作用 域 为 singleton 时 ，Spring IoC 容器 
中 只 会 存在 一 个 共享 的 Bean 实例 ， 并 且 所 有 对 Bean 的 请 求 ， 只 要 id 与 该 Bean 定义 相 匹 
配 ， 就 只 会 返回 Bean 的 同一 实例 。 换 言 之 ， 当 把 一 个 Bean 定义 设置 为 singlton 作用 域 时 ， 
Spring IoC 容器 只 会 创建 该 Bean 定义 的 唯一 实例 。 这 个 单一 实例 会 被 存储 到 单 例 缓存 
(singleton cache) 中 ， 并 且 所 有 针对 该 Bean 的 后 续 请 求 和 引用 都 将 返回 被 缓存 的 对 象 实例 。 
单 实例 模式 对 于 无 会 话 状 态 的 Bean( 如 DAO 组件、 业务 逻辑 组 件 ) 来 说 是 最 理想 的 选择 。 

要 在 Spring 配置 文件 applicationContextxml 中 将 Bean 定义 成 singleton, 可 以 这 样 配置 : 


<bean id="helloSpring" class="com.ssm.HelloSpring" scope="singleton"> 
<property name="userName" value=" 张 三 "></property> 


</bean> 


将 项 目 spring-1 复制 并 重 命名 为 “spring-3”， 再 导入 到 Eclipse 开发 环境 中 。 在 项 目 
spring-3 的 com.ssm 包 中 创建 测试 类 TestBeanScope, 在 main() 方 法 中 测试 singleton 作用 域 ， 
代码 如 下 : 


Package com.ssm; 

import org.springframework.context.ApplicationContext; 

import 
org.springframework.context.support.ClassPathxmlApplicationContext; 
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Public class TestBeanScope { 


public static void main(String[] args) { 

// 加 载 applicationcontext .xml 配置 
ApplicationContext context = new 

ClassPathxmlApplicationContext ("applicationContext.xml"); 
// 获取 配置 中 的 实例 
HelloSpring hsl = (HelloSpring) context.getBean("helloSpring"); 
HelloSpring hs2 = (HelloSpring) context.getBean("helloSpring"); 
System-out.println (hsl == hs2);// 判 断 取 得 的 实例 值 是 否 相等 


} 


运行 测试 类 TestBeanScope， 控 制 台 输出 结果 为 tue， 说 明 hsl 和 hs2 的 地 址 是 相等 的 ， 
由 此 可 见 在 单 实例 作用 域 下 ， 只 创建 了 一 个 HelloSpring 类 的 实例 。 


2. prototype( 原 型 模式 ) 作 用 域 


prototype 作用 域 的 Bean 在 每 次 对 该 Bean 请 求 时 都 会 创建 一 个 新 的 Bean 实例 , 对 需要 
保持 会 话 状态 的 Bean( 如 Struts 2 中 充当 控制 器 的 Action 类) 应 该 使 用 prototype 作 用 域 .Spring 
不 能 对 一 个 原型 模式 Bean 的 整个 生命 周期 负责 ， 容 器 在 初始 化 、 装 配 好 一 个 原型 模式 实例 
后 ， 将 它 交 给 客户 端 ， 就 不 再 过 问 了 。 因 此 ， 客 户 端 要 负责 原型 模式 实例 的 生命 周期 管理 。 

在 Spring 配置 文件 中 将 Bean 定义 成 prototype， 配 置 修改 如 下 : 

<bean id="helloSpring" class="com.ssm.HelloSpring" scope="prototype"> 

<property name="userName" value=" 张 三 "></property> 

</bean> 

再 次 运行 测试 类 TestBeanScope, 控制 台 输 出 结果 为 false, 这 说 明 在 prototype 作用 域 下 ， 
创建 了 两 个 不 同 的 HelloSpring 类 的 实例 。 

其 他 作用 域 ， 如 request、session 以 及 global session 仅 在 基于 Web 的 应 用 中 使 用 ， 在 
以 后 用 到 时 再 作 讲解 。 


3.4 ”Bean 的 装配 方式 


Spring 容器 负责 创建 应 用 程序 中 的 Bean， 并 通过 依赖 注入 协调 这 些 对 象 之 间 的 关系 。 
创建 应 用 对 象 之 间 协 作 关系 的 行为 通常 称 为 装配 (wiring)， 这 也 是 依赖 注入 (Dependency 
Injection) 的 本 质 ，Bean 的 装配 方式 即 Bean 依赖 注入 。 在 开发 基于 Spring 的 应 用 时 ，Spring 
容器 支持 多 种 形式 的 Bean 装配 方式 ， 如 基于 XML 的 装配 、 基 于 注解 (Annotation) 的 装配 和 
自动 装配 等 ， 下 面 介绍 这 三 种 装配 方式 的 使 用 。 


3.4.1 基于 XML 的 Bean 装配 
Spring 提供 了 两 种 基于 XML 的 装配 方式 ， 属 性 setter 方法 注入 和 构造 方法 注入 。 在 


Spring 实例 化 Bean 的 过 程 中 , Spring 首先 会 调用 Bean 的 默认 构造 方法 来 实例 化 Bean 对 象 ， 
然后 通过 反射 的 方式 调用 setter 方法 来 注入 属性 值 .属性 setter 方法 注入 要 求 Bean 必须 满足 
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ee Bean 类 必须 提供 一 个 默认 的 构造 方法 。 
e@ ”Bean 类 必须 为 需要 注入 的 属性 提供 对 应 的 setter 方法 。 
在 Spring 配置 文件 中 ， 使 用 属性 setter 方法 注入 时 ， 在 <bean> 元 素 的 子 元 素 <property> 
中 为 每 个 属性 注入 值 ， 而 使 用 构造 方法 注入 时 ， 在 <bean> 元 素 的 子 元 素 <constructor-arg> 中 
定义 构造 方法 的 参数 ， 可 使 用 其 value 属性 (或 子 元 素 ) 来 设置 该 参数 的 值 。 
在 2.3.2 小 节 的 依赖 注入 的 类 型 示例 中 ， 就 是 基于 XML 的 Bean 装配 ， 其 Spring 的 配 
置 文件 代码 如 下 : 
<bean id="adminInfo" class="com.ssm.entity.AdminInfo"> 
<property name="id" value="5"></property> 
<constructor-arg name="name" value="admin"/> 


<constructor-arg name="pwd" value="123456"/> 
</bean> 


3.4.2 ”基于 Annotation 的 Bean 装配 


在 Spring 中 尽管 使 用 XML 配置 文件 可 以 实现 Bean 的 装配 工作 ， 但 如 果 应 用 中 Bean 
的 数量 较 多 ， 会 导致 XML 配置 文件 过 于 脐 肿 ， 从 而 给 维护 和 升级 带 来 一 定 的 困难 。 从 JDK 5 
开始 提供 了 名 为 Annotation( 注 解 ) 的 功能 ，Spring 正 是 利用 这 一 特性 ， 逐 步 完善 对 
Annotation( 注 解 ) 技 术 的 全 面 支持 ， 使 XML 配置 文件 不 再 脐 肿 ， 向 “ 零 配 置 ”迈进 。 

Spring 中 定义 了 一 系列 的 Annotation( 注 解 )， 如 下 所 示 。 

e@  @Component 注解 

@Component 是 一 个 泛 化 的 概念 ， 使 用 此 注解 描述 Spring 中 的 Bean， 仅 仅 表示 一 个 组 
件 (Bean)， 可 以 作用 在 任何 层次 。 使 用 时 只 需 将 该 注解 标注 在 相应 类 上 即 可 。 

@ ”(@Repository 注解 

@Repository 注解 用 于 将 数据 访问 层 (DAO 层 ) 的 类 标识 为 Spring 中 的 Bean， 其 功能 与 
@Component 相同 。 

e@  @Service 注解 

@Service 通常 作用 在 业务 层 (Service 层 )， 用 于 将 业务 层 的 类 标识 为 Spring 中 的 Bean， 
其 功能 与 @Component 相同 。 

e@  @Controller 注解 

@Controller 通常 作用 在 控制 层 (如 Spring MVC 的 Controller)， 用 于 将 控制 层 的 类 标识 
为 Spring 中 的 Bean， 其 功能 与 @Component 相同 。 

e@  @Autowired 注解 

用 于 对 Bean 的 属性 变量 、 属 性 的 setter 方法 及 构造 方法 进行 标注 ， 配 合 对 应 的 注解 处 
理 器 完成 Bean 的 自动 配置 工作 .@Autowired 注解 默认 按照 Bean 类 型 进行 装配 。@Autowired 
注解 加 上 @Qualifier 注解 ， 可 直接 指定 一 个 Bean 实例 名 称 来 进行 装配 。 

@  @Resource 注解 

作用 相当 于 @Autowired, 配置 对 应 的 注解 处 理 器 完成 Bean 的 自动 配置 工作 。 区 别 在 于 : 
@Autowired 默认 按照 Bean 类 型 进行 装配 ，@Resource 默认 按照 Bean 实例 名 称 进行 装配 。 
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@Resource 包括 name 和 type 两 个 重要 属性 。Spring 将 name 属性 解析 为 Bean 实例 的 名 称 ， 
将 type 属性 解析 为 Bean 实例 的 类 型 。 如 果 指 定 name 属性 ， 则 按照 实例 名 称 进行 装配 ; 如 
果 指 定 type， 则 按照 Bean 类 型 进行 装配 。 如 果 都 不 指定 ， 则 先 按照 Bean 实例 名 称 装 配 ， 
如 果 不 能 匹配 ， 再 按照 Bean 类 型 进行 装配 ， 如 果 都 无 法 匹配 ， 则 抛 出 
NoSuchBeanDefinitionException 异常 。 

e ” @Qualifier 注解 

与 @Autowired 注解 配合 ， 将 默认 按 Bean 类 型 装配 修改 为 按 Bean 实例 名 称 进行 装配 ， 
Bean 的 实例 名 称 由 @Qnualifier 注解 的 参数 指定 。 

在 上 面 几 个 注解 中 ， 虽 然 @Repository、@Service 和 @Controller 的 功能 与 @Component 
注解 的 功能 相同 ， 但 为 了 使 类 的 标注 更 加 清晰 ， 在 实际 开发 中 推荐 使 用 @Repository 标注 数 
据 访问 层 (DAO 层 )、 使 用 @Service 标注 业务 逻辑 层 (Service 层 )、 使 用 @Controller 标注 控制 
器 层 (Controller 层 )。 

在 2.3.3 小 节 以 登录 验证 为 例 讲述 依赖 注入 时 , 使 用 了 基于 XML 的 Bean 装配 。 下 面 将 
该 示例 的 依赖 关系 通过 注解 进行 装配 ， 实 现 过 程 如 下 : 

(1) 将 项 目 spring-2 复制 并 重 命 名 为 “spring-4”， 再 导入 到 Eclipse 开发 环境 中 。 

(2) 将 spring-aop-5.0.4.RELEASE.jar 文件 添加 到 项 目 spring-4 的 lib 目录 中 ， 再 将 该 jar 
包 添 加 到 项 目的 构建 路 径 中 。 

(3) 修改 UserDAO 接口 的 实现 类 UserDAOImpl， 如 下 所 示 : 

Package com.ssm.dao.impl; 

import org.springframework.stereotype.Repository; 

import com.ssm.dao.UserDAO; 

@Repository ("userDAO") 

public class UserDAOImp] implements UserDAO { 

@Override 
public boolean login(String loginName, String loginPwd) { 


if (loginName.equals ("admin") && loginPwd.equals ("123456")){ 
return true; 


} 


return false; 


} 


在 UserDAOImpl 类 上 使 用 了 @Repository 注解 ， 将 数据 访问 层 的 类 UserDAOImpl 标识 
为 Spring Bean， 通 过 value 属性 值 标识 该 Bean 名 称 为 “userDAO”(value 可 以 缺 省 )。 
(4) 修改 UserService 接口 的 实现 类 UserServiceImpl， 代 码 如 下 : 


Package com.ssm.service.impl; 

import org.springframework.beans.factory.annotation.Autowired; 

import org.springframework.stereotype.Service; 

import com.ssm.dao.UserDAO; 

import com.ssm.service.UserService; 

QService ("userService") 

public class UserServiceImpl implements UserServicel{ 
@Autowired 


UserDAO userDAO; // 使 用 接口 serDao 声明 对 象 
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// 实现 接口 中 的 方法 


QOoverride 
public boolean login(String loginName, String loginPwd) { 
// 调 用 userDao 中 的 1ogin () 方 法 


return userDAO.login(loginName, loginPwd); 


} 


在 UserServiceImpl 类 上 使 用 了 @Service 注解 , 将 业务 逻辑 层 的 类 UserServiceImpl 标识 
为 Spring Bean， 该 Bean 的 名 称 为 “userService”。 在 UserDAO 类 型 的 属性 userDAO 上 使 
用 了 @Autowired 注解 , 可 将 步骤 G3) 中 由 Spring 容器 实例 化 的 名 称 为 userDAO 的 Bean 装配 
到 属性 userDAO 中 。@Anutowired 注解 自动 装配 具有 兼容 类 型 的 单个 Bean 属性 ， 可 以 加 在 
构造 器 、 普 通 字段 、 一 切 具 有 参数 的 方法 上 。 
(5) 修改 Spring 配置 文件 。 
组 件 扫描 默认 不 是 启用 的 , 我 们 还 需要 显 式 修改 Spring 配置 文件 , 让 Spring 能 够 扫描 
类 路 径 中 的 类 ， 并 识别 出 @Component、@Repository、(@Service 和 @Controller 注解 ， 需 要 
在 Spring 配置 文件 中 启用 Bean 的 自动 扫描 功能 , 可 以 通过 <context:component-scan /> 元 素 ， 
设置 属性 base-package 来 指定 扫描 的 包 名 ， 代 码 如 下 。 
<?xml] Version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.0org/2001/XMLSchema-instance" 
xmlns:context="http://www.springframework .org/schema/context" 
xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context.xsd"> 
<!-- 配置 自动 扫描 的 基 包 --> 
<context: component-scan base-package="com.ssm" /> 
</beans> 
为 了 能 正常 使 用 <context> 元 素 ， 需 要 引入 context 命名 空间 。base-package 属性 指定 需 
要 扫描 的 基 包 ，Spring 容器 将 会 扫描 这 个 基 包 及 其 子 包 中 的 所 有 类 ， 当 需要 扫描 多 个 包 时 ， 
可 以 使 用 逗号 分 隔 。 对 于 扫描 到 的 组 件 ，Spring 有 默认 的 命名 策略 ， 使 用 非 限定 类 名 ， 第 一 
个 字母 小 写 ， 也 可 以 在 注解 中 通过 value 属性 值 标 识 组 件 的 名 称 。<context:component-scan /> 
元 素 还 会 自动 注册 AutowiredAnnotationBeanPostProcessor 实例 可 以 自动 装配 具有 
@Autowired、@Resource 和 (@Inject 注解 的 属性 。 
运行 测试 类 TestSpringDI， 运 行 效果 同 项 目 spring-2， 控 制 台 输出 结果 为 “登录 成 功 ”。 


3.4.3 ”自动 装配 


除了 使 用 XML 和 Annotation 装配 Bean 外 ， 还 有 一 种 常用 的 装配 方式 ， 就 是 使 用 自动 
装配 。Spring 的 <bean> 元 素 中 包含 一 个 autowire 属性 ， 可 通过 设置 autowire 属性 来 自动 装 
配 Bean。 所 谓 自动 装配 ， 就 是 将 一 个 Bean 注入 到 其 他 Bean 的 Property 中 。autowire 属性 
值 及 说 明 如 下 。 
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@ default: 默认 值 ， 由 <bean> 的 上 级 标签 <beans> 的 default-autowire 属性 值 确定 。 例 
如 <beans default-autowire= "byname" >， 则 该 <bean> 元 素 中 的 autowire 属性 对 应 的 
属性 值 就 为 byName。 
@ byName: 根据 Property 的 Name 自动 装配 ,如 果 一 个 Bean 的 name 和 另 一 个 Bean 
中 的 Property 的 name 相同 ， 则 自动 装配 这 个 Bean 到 Property 中 。 
@ byType: 根据 Property 的 数据 类 型 (TYPE) 自 动 装配 , 如 果 一 个 Bean 的 数据 类 型 和 
另 一 个 Bean 中 的 Property 的 数据 类 型 相同 ， 则 自动 装配 这 个 Bean 到 Property 中 。 
@ constructor: 根据 构造 函数 参数 的 数据 类 型 ， 进 行 byType 模式 的 自动 装配 。 
@ ”autodetect: 如 果 发 现 默认 的 构造 函数 ， 用 constructor 模式 ， 否 则 用 byType 模式 。 
@ no: 默认 情况 下 ， 不 适用 自动 装配 ，Bean 依赖 必须 通过 ref 元 素 定义 。 
修改 2.4.3 小 节 中 的 Spring 配置 文件 ， 将 配置 文件 修改 成 如 下 自动 装配 形式 : 
<!-- 使 用 bean 元 素 的 autowire 属性 完成 自动 装配 --> 
<bean id="userDAO" class="com.ssm.dao.impl.UserDAOImpl"></bean> 
<bean id="userService" class="com.ssm.service.impl.UserServiceImpl" 
autowire="byName" /> 
上 述 配置 文件 中 , 用 于 配置 userService 的 <bean> 元 素 中 除了 id 和 class 属性 外 , 还 增加 
了 autowire 属性 ， 并 将 其 属性 值 设 置 为 byName。 在 默认 情况 下 ， 配 置 文件 中 需要 通过 ref 
来 装配 Bean， 但 设置 了 autowire="byName" 后 ，Spring 会 自动 寻找 userService Bean 中 的 属 
性 ， 并 将 其 属性 名 称 与 配置 文件 中 定义 的 Bean 做 匹配 。 由 于 UserServiceImpl 中 定义 了 
userDAO 属性 及 其 setter 方法 , 这 与 配置 文件 中 id 为 userDAO 的 Bean 相 匹配 , 所 以 Spring 
会 自动 地 将 id 为 userDAO 的 Bean 封装 到 id 为 userService 的 Bean 中 。 
对 于 大 型 的 应 用 、 不 鼓励 使 用 自动 装配 。 虽 然 使 用 自动 装配 可 减少 配置 文件 的 工作 量 ， 
但 大 大 降低 了 依赖 关系 的 清晰 性 和 透明 性 。 依 赖 关 系 的 装配 依赖 于 源 文 件 的 属性 名 ， 导 致 
Bean 与 Bean 之 间 的 耦合 降低 到 代码 层次 ， 不 利于 高 层次 解 耦 。 


3.5 小 结 


本 章 主要 介绍 了 Spring IoC 容器 、Bean 的 配置 、Bean 的 作用 域 和 Bean 的 装配 方式 ， 
即 基于 XML 的 Bean 装配 、 基 于 Annotation 的 Bean 装配 和 自动 装配 。 通 过 本 章 的 学 习 , 读 
者 可 以 了 解 Spring IoC 容器 ，Bean 的 常用 属性 及 其 作用 ， 熟 悉 Bean 作用 域 的 种 类 ， 掌 握 
Bean 的 三 种 装配 方式 。 
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AOP( 面 向 方面 编程 ) 是 一 种 编程 范式 ， 一 般 适用 于 具有 横 切 逻辑 的 场合 ， 如 访问 控制 、 
事务 管理 、 性 能 监测 等 ， 旨 在 通过 允许 横 切 关注 点 的 分 离 ， 提 高 模块 化 。 目 前 有 许多 AOP 
框架 ， 其 中 最 流行 的 两 个 框架 为 Spring AOP 和 AspectJ。 


4.1 AOP 概述 


4.1.1 认识 AOP 


面向 方面 编程 (Aspect-Oriented Programming，AOP) 也 称 为 面向 切面 编程 ， 是 软件 编程 
思想 发 展 到 一 定 阶段 的 产物 ， 虽 然 是 一 种 新 的 编程 思想 ， 但 却 不 是 面向 对 象 编程 
(Object-Oriented Programming，OOP) 的 替代 品 ， 它 只 是 OOP 的 有 益 补充 和 延伸 。 

经 过 几 十 年 的 发 展 ， 面 向 对 象 程序 设计 方法 已 流 
次 的 对 象 ， 通 过 封装 、 继 承 、 多 态 等 特性 站 
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在 业务 系统 中 ， 总 有 一 些 散落 、 渗 透 到 系统 各 处 且 不 得 不 处 理 的 事情 ， 这 些 穿插 在 既 
定 业务 中 的 操作 就 是 所 谓 的 “ 横 切 逻辑 ”， 也 称 为 切面 。 怎 样 才能 不 受 这 些 附 加 要 求 的 干 
扰 ， 专 注 于 真正 的 业务 多 辑 呢 ? 将 这 些 重复 性 的 代码 抽取 出 来 ， 放 在 专门 的 类 和 方法 中 处 
理 ， 这 样 就 便于 管理 和 维护 了 。 即 便 如 此 ， 依 然 无 法 实现 既定 业务 和 横 切 逻辑 的 彻底 解 看 ， 
因为 业务 方法 中 还 要 保留 这 些 方法 的 调用 代码 ， 当 需要 增加 或 者 减少 横 切 逻辑 的 时 候 ， 还 
是 要 修改 业务 方法 中 的 调用 代码 才能 实现 。 我 们 所 希望 的 是 无 需 编写 显 式 的 调用 ， 而 是 在 
需要 的 时 候 能 够 “自动 ”调用 所 需 的 功能 ， 这 正 是 AOP 所 要 解决 的 问题 。 

AOP 采取 横向 抽取 机 制 ， 将 分 散在 各 个 方法 中 的 重复 代码 提取 出 来 ， 然 后 在 程序 编译 
或 运行 时 ， 再 将 这 些 提 取出 来 的 代码 应 用 到 需要 执行 的 地 方 。 这 种 采用 横向 抽取 机 制 的 方 
式 ， 使 用 传统 的 OOP 思想 是 无 法 办 到 的 ， 因 为 OOP 只 能 实现 纵向 的 重用 。 

面向 方面 编程 ， 简 单 地 说 ， 就 是 在 不 改变 原 有 程序 的 基础 上 为 代码 段 增 加 新 的 功能 ， 
对 其 进行 增强 处 理 ， 其 设计 思想 来 源 于 代理 设计 模式 。 下 面 以 图 示 的 方式 进行 简单 的 说 明 ， 
通常 情况 下 调用 对 象 的 方法 如 图 4-1 所 示 。 


图 4-1 直接 调用 对 象 的 方法 


在 代理 模式 中 ， 可 为 对 象 设置 一 个 代理 对 象 ， 代 理 对 象 为 func() 提 供 一 个 代理 方法 ， 当 
通过 代理 对 象 的 func0 方 法 调用 源 对 象 的 func0 方 法 时 ， 就 可 在 代理 方法 中 添加 新 的 功能 ， 
这 就 是 所 谓 的 增强 处 理 。 增 强 的 功能 既 可 以 插 到 源 对 象 的 func0 方 法 前 面 , 也 可 插 到 其 后 面 ， 
如 图 4-2 所 示 。 


图 4-2 通过 代理 对 象 调用 方法 


在 此 模式 下 ， 就 可 在 原 有 代码 乃至 原 业 务 流程 都 不 变 的 情况 下 ， 直 接 在 业务 流程 汇总 
切入 新 代码 ， 增 加 新 功能 ， 这 就 是 所 谓 的 面向 切面 编程 。AOP 的 使 用 ， 使 开发 人 员 在 编写 
业务 逻辑 时 可 以 专心 于 核心 业务 ， 而 不 用 过 多 地 关注 其 他 业务 的 实现 ， 这 不 但 提高 了 开发 
效率 ， 而 且 增 强 了 代码 的 可 维护 性 。 

OOP 将 应 用 程序 分 解 成 多 个 层次 的 对 象 , 而 AOP 将 程序 分 解 成 多 个 切面 。 日 志 、 事务 、 
安全 验证 等 这 些 “ 通 用 的 ”、 散 布 在 系统 各 处 的 需要 在 实现 业务 逻辑 时 关注 的 事情 称 为 “ 方 
面 ”， 也 可 称 为 “关注 点 ”。 如 果 能 将 这 些 “ 方 面 ”集中 处 理 ， 然 后 在 具体 运行 时 ， 再 由 
容器 动态 织 入 这 些 “ 方 面 ”， 至 少 有 以 下 两 个 好 处 : 

@ 可 以 减少 “方面 ”代码 里 的 错误 ， 处 理 策略 改变 时 还 能 做 到 统一 修改 。 

e ”在 编写 业务 逻辑 时 可 以 专心 于 核心 业务 。 
因此 ，AOP 要 做 的 事情 就 是 从 系统 中 分 离 出 “方面 ”， 然 后 集中 实现 ， 从 而 独立 地 编 
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写 业 务 代码 和 方面 代码 ， 在 系统 运行 时 ， 再 将 方面 “ 织 入 ”到 系统 中 。 


4.1.2 AOP 术语 


实际 上 ，AOP 并 不 是 一 个 新 的 概念 ， 在 一 些 语言 和 框架 中 ， 早 就 出 现 了 类 似 的 机 制 。 
Java 平 台 的 EJB 规范 、Servlet 规范 以 及 Struts 2 框架 中 存在 的 拦截 器 机 制 ， 实 际 上 与 AOP 
要 实现 的 功能 非常 相似 。AOP 是 在 这 些 概念 基础 上 的 发 展 ， 提 供 了 更 通用 的 解决 方案 。 

AOP 中 涉及 面 、 通 知 、 切 入 点 、 目 标 对 象 、 代 理 对 象 、 织 入 等 很 多 术语 ， 常 用 的 术语 
简单 介绍 如 下 。 

@ ”切面 (Aspect) 

一 个 关注 点 的 模块 化 ， 该 关注 点 可 能 会 横 切 多 个 对 象 。 比 如 方面 (日 志 、 事 务 、 安 全 验 
证 ) 的 实现 ， 如 日 志 切 面 、 事 务 切面 、 权 限 切 面 等 。 在 实际 应 用 中 ， 通 常 存放 方面 实现 的 普 
通 Java 类 ， 该 类 要 被 AOP 容器 识别 为 切面 ， 需 要 在 配置 中 通过 <bean> 标 记 指定 。 

@ ”连接 点 (JoinPoint) 

程序 执行 中 的 某 个 具体 的 执行 点 ， 比 如 某 方法 调用 的 时 候 或 者 处 理 异常 的 时 候 。 在 
Spring AOP 中 ,一 个 连接 点 总 是 表示 一 个 方法 的 执行 ， 如 图 4-2 所 示 原 对 象 的 func0 方 法 就 
是 一 个 连接 点 。 

@ 切入 点 (Pointcut) 

切入 点 是 指 切面 与 程序 流程 的 交叉 点 ， 即 那些 需要 处 理 的 连接 点 ， 如 图 4-3 所 示 。 当 某 
个 连接 点 满足 预先 指定 的 条 件 时 ，AOP 框架 能 够 定位 到 这 个 连接 点 ， 该 连接 点 将 被 添加 增 
强 处 理 ， 该 连接 点 也 就 变 成 了 切入 点 。 通 常 在 程序 中 ， 切 入 点 指 的 是 类 或 者 方法 名 ， 如 某 
个 通知 要 应 用 到 所 有 以 add 开头 的 方法 中 ， 那 么 所 有 满足 这 一 规则 的 方法 都 是 切入 点 。 


程序 流程 


图 4-3 切面 、 连 接点 和 切入 点 


@ 通知 /增强 处 理 (Advice) 

在 切面 的 某 个 特定 的 连接 点 上 执行 的 动作 (一 段 程序 代码 )， 是 切面 的 具体 实现 。 以 目标 
方法 为 参照 点 ， 根 据 放 置 的 位 置 不 同 ， 可 以 分 为 前 置 通知 、 后 置 通知 、 异 常 通知 、 环 绕 通 
知 和 最 终 通知 等 5 种 。 例 如 图 4-2 中 ， 在 原 对 象 的 func0 方 法 之 前 插入 的 增强 处 理 为 前 置 通 
知 ， 在 该 方法 正常 执行 完 以 后 插入 的 增强 处 理 为 后 置 通知 。 切 面 类 中 的 某 个 方法 有 具体 属于 
哪 类 通知 ， 需 要 在 配置 中 指定 。 许 多 AOP 框架 (包括 Spring) 都 是 以 拦截 器 作 通 知 模型 ， 并 
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维护 一 个 以 连接 点 为 中 心 的 拦截 器 链 。Advice 直译 为 “通知 ”， 但 这 种 说 法 并 不 确切 ， 在 
此 翻译 为 “增强 处 理 ” 便 于 理解 。 

@ 目标 对 象 (Target Object) 

目标 对 象 是 指 被 一 个 或 者 多 个 切面 所 通知 的 对 象 ， 也 被 称 为 被 通知 对 象 。 如 果 AOP 框 
架 采 用 的 是 动态 的 AOP 实现 ， 那 么 该 对 象 就 是 一 个 被 代理 的 对 象 。 这 些 对 象 中 只 包含 核心 
业务 逻辑 代码 ， 所 有 日 志 、 事 务 、 安 全 验证 等 方面 的 功能 等 待 AOP 容器 的 织 入 。 

@ ”代理 对 象 (Proxy Object) 

代理 对 象 是 指 将 通知 应 用 到 目标 对 象 之 后 ， 被 动态 创建 的 对 象 。 代 理 对 象 的 功能 相当 
于 目标 对 象 中 实现 的 核心 业务 逻辑 功能 加 上 方面 日志、 事务 、 安 全 验证 ) 代 码 实现 的 功能 。 

@ 织 入 (Weaving) 

织 入 是 指 生成 代理 对 象 并 将 切面 内 容 放 入 到 流程 中 的 过 程 ， 即 将 切面 代码 插入 到 目标 
对 象 上 ， 从 而 创建 一 个 新 的 代理 对 象 的 过 程 。 

AOP 的 概念 比较 生 涩 难 懂 ， 切 面 可 以 理解 为 由 增强 处 理 和 切入 点 组 成 ， 既 包含 了 横 切 
逻辑 的 定义 ， 也 包含 了 连接 点 的 定义 。 面 向 切面 编程 主要 关心 两 个 问题 ， 即 在 什么 位 置 执 
行 什 么 功能 。Spring AOP 是 负责 实施 切面 的 框架 ， 即 由 Spring AOP 完成 织 入 工作 。 


4.2 基于 XML 配置 文件 的 AOP 实现 


Spring AOP 通知 包括 前 置 通知 、 返 回 通 知 、 正 常 返回 通知 、 异 常 通知 和 环绕 通知 。 使 
用 AOP 框架 时 ,开发 者 需要 做 的 主要 工作 是 定义 切入 点 和 通知 (增强 处 理 )， 通常 采用 XML 
配置 文件 或 注解 的 方式 ， 配 置 好 切入 点 和 增强 的 信息 后 ，AOP 框架 会 自动 生成 AOP 代理 。 
本 节 将 基于 XML 配置 文件 的 方式 实现 前 置 通知 、 返 回 通知 、 异 常 通知 和 环绕 通知 。 


4.2.1 前 置 通知 


前 置 通知 在 连接 点 (所 织 入 的 业务 方法 ) 前 面 执行 ， 不 会 影响 连接 点 的 执行 ， 除 非 此 处 抛 
出 异常 。 下 面 通 过 示例 演示 如 何 实现 前 置 通知 ， 其 过 程 如 下 : 

(1) 将 spring-1 项 目 复制 并 重 命 名 为 “spring-5”， 再 导入 到 Eclipse 开发 环境 中 。 

(2) 在 前 面 核心 包 的 基础 上 , 向 项 目 中 导入 所 需 的 jar 包 : spring-aop-5.0.4.RELEASE.jar、 
spring-aspects-5.0.4.RELEASE.jar、aopalliance-1.0.jar 和 aspectjweaver-1.9.1.jar， 把 文件 添加 
到 项 目 spring-5 的 lib 目录 中 ， 再 将 前 述 4 个 jar 包 添 加 到 项 目的 构建 路 径 中 。 

@ spring-aop-5.0.4.RELEASE.jar: Spring AOP 提供 的 实现 包 ，Spring 包 中 已 经 提供 。 

@ spring-aspects-5.0.4.RELEASE.jar: 提供 对 AspectJ 的 支持 ， 以 便 可 以 方便 地 将 面向 

方面 的 功能 集成 进 IDE 中 ，Spring 包 中 已 经 提供 。 

@ aopalliance-1.0jar: AOP 联盟 提供 的 规范 包 ， 该 jar 包 可 以 通过 地 址 

http://mvnrepository.com/artifact/aopalliance/aopalliance/ 下 载 。 

@ aspectjweaver-1.9.1jar: 如 果 使 用 @Aspect 注解 方式 ， 可 以 在 类 上 直接 加 一 个 

@Aspect 注解 ， 不 用 费事 在 xml 里 配 了 ， 但 是 这 需要 额外 的 jar 包 (aspectjweaver- 
1.9.1jar)。 因 为 spring 直接 使 用 AspectJ 的 注解 功能 ， 注 意 只 是 使 用 了 它 的 注解 功 
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能 而 已 。 该 jar 包 可 通过 地 址 http://mvnrepository.com/artifact/org.aspectj/aspectjweaver/ 
下 载 。 
(3) 创建 包 com.ssm.service， 在 包 中 创建 接口 ProductService， 添 加 方法 browse， 模 拟 
用 户 浏览 商品 的 业务 。 


Package com.ssm.service; 
public interface ProductService { 

// 定义 抽象 方法 browse， 模 拟 某 用 户 浏览 某 商品 

public void browse (String loginName,Sstring ProductName); 
} 


(4) 创建 包 com.ssm.service.impl, 在 包 中 创建 接口 ProductService 的 实现 类 ProductServiceImpl， 
实现 模拟 用 户 浏览 商品 的 browse 方法 。 


Package com.ssm.service.impl; 
import com.ssm.service.ProductService; 
public class ProductServiceImpl implements ProductService { 
// 实现 方法 browse， 模 拟 某 用 户 浏览 某 商 品 
@Ooverride 
public void browse (String loginName, String ProductName) { 
System.out.println ("执行 业务 方法 browse"); 
} 
} 


(5) 创建 包 com.ssm.aop， 在 包 中 创建 日 志 通 知 类 AllLogAdvice， 在 类 中 编写 用 于 生成 
日 志 记 录 的 方法 myBeforeAdvice， 如 下 所 示 : 


Package com.ssm.aop; 
import java.text.SimpleDateFormat; 
import java.util.Arrays; 
import java.util.Date; 
import java.util.List; 
import org.aspectj.lang.JoinPoint; 
public class AllLogAdvice { 
// 此 方法 将 作为 前 置 通知 
Public void myBeforeAdvice (JoinPoint joinPoint) { 
// 获取 业务 方法 参数 
List<Object> args = Arrays.asList (joinPoint.getArgs ()); 
// 日 志 格式 字符 串 
String logInfoText = "前 置 通知 : " 
+ new SimpleDateFormat ("yyyy-MM-dd HH:mm:ss") 
.format (new Date()) + " " + args.get (0) .toString() 
+ " 浏览 商品 " + args.get(1) .tostring(); 
// 将 日 志 信息 输出 到 控制 台 


System.out.println (logInfoText); 


这 里 我 们 把 myBeforeAdvice 作为 前 置 通知 使 用 , 即将 该 方法 添加 到 目标 方法 之 前 执行 ， 
为 了 能 够 在 通知 方法 中 获得 当前 连接 点 的 信息 ， 以 便 实施 相关 的 判断 和 处 理 ， 可 在 通知 方 
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法 中 声明 一 个 JoinPoint 接口 类 型 的 参数 jionPoint，Spring 会 自动 注入 实例 。 通 过 jionPoint 
的 getArgs0 方 法 ，myBeforeAdvice 就 能 获得 业务 方法 browse 的 参数 loginName 和 
productName。 

(6) 编辑 Spring 配置 文件 。 

在 Spring 配置 文件 applicationContext.xml 中 ,采用 AOP 配置 方式 将 日 志 类 AllLogAdvice 
与 业务 组 件 ProductService 原本 两 个 互 不 相关 的 类 和 接口 通过 AOP 元 素 进行 装配 ， 从 而 将 
日 志 通 知 类 AllLogAdvice 中 的 日 志 通 知 织 入 到 ProductService 中 ， 以 实现 预期 的 日 志 记 录 。 
applicationContext.xml 配置 文件 的 内 容 如 下 所 示 : 


<?xml version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:XSsi="http://www.w3.org/2001/XMLSchema-instance" 
xmlns:aop="http://www.springframework.org/schema/aop" 
xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd 
http://www.springframework.org/schema/aop 
http://www.springframework.org/schema/aop/spring-aop.xsd"> 
<!-- 实例 化 业务 类 的 Bean --> 


<bean id="productService" 


class="com.ssm.service.impl.ProductServiceImpl"></bean> 
<!-- 实例 化 日 志 通知 /增强 处 理 类 (切面 ) 的 Bean --> 
<bean id="allLogAdvice" class="com.ssm.aop.AllLogAdvice"/> 
<!-- 配置 aop --> 
<aop:config> 
<!-- 配置 日 志 切 面 --> 
<aop:aspect id="logaop" ref="allLogAdvice"> 
<!-- 定义 切入 点 ， 切 入 点 采用 正则 表达 式 ， 含义 是 对 browse 的 方法 进行 拦截 --> 
<aop:pointcut expression="execution (public void 
browse (String, string))" id="logpointcut"/> 
<!-- 将 日 志 通 知 类 中 的 myBeforeadvice 方法 指定 为 前 置 通知 --> 
<aop:before method="myBeforeAdvice" 
pointcut-ref="logpointcut"/> 
</aop:aspect> 
</aop:config> 
</beans> 
由 于 Spring 的 AOP 配置 标签 是 放置 在 aop 命名 空间 之 下 的 , 需要 在 Spring 配置 文件 的 
<beans> 元 素 中 ， 导 入 AOP 命名 空间 及 其 配套 的 schemaLocation。 在 配置 文件 中 ， 首先 实例 
化 业务 类 ProductServiceImpl 的 Bean, 然后 实例 化 日 志 通 知 /增强 处 理 类 (切面 ) AllLogAdvice 
的 Bean， 最 后 通过 <aop:config> 元 素 进 行 AOP 的 配置 。 在 配置 AOP 时 ， 通 过 <aop:aspect> 
子 元 素 配置 日 志 切 面 ;在 配置 日 志 切 面 时 ， 先 通过 <aop:pointcut> 子 元 素 定 义 切入 点 ， 切 入 
点 采用 正则 表达 式 execution(public void browse(String,String)), 含义 是 对 browse(String,String) 
的 方法 进行 拦截 。 再 通过 <aop:before> 子 元 素 将 日 志 通 知 类 中 的 myBeforeAdvice 方法 指定 为 
前 置 通知 。 
上 面 的 配置 代码 中 的 execution 是 切入 点 指示 符 ， 括 号 中 是 一 个 切入 点 表达 式 ， 用 于 配 
置 需要 切入 增强 处 理 的 方法 的 特征 。 切 入 点 表达 式 支 持 模糊 匹配 ， 下 面 介 绍 几 种 常用 的 模 
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糊 匹 配 。 
public * browse(String,String): “*” 表 示 匹 配 所 有 类 型 的 返回 值 。 
public void *(String,String): “*” 表 示 匹 配 所 有 方法 名 。 
public void browse(..): “..” 表 示 匹 配 所 有 参数 个 数 和 类 型 。 
* com.ssm.service.*.*(..): 表示 匹配 com.ssm.service 包 下 所 有 类 的 所 有 方法 。 
* com.ssm.service..*.*(..): 表示 匹配 com.ssm.service 包 及 其 子 包 下 所 有 类 的 所 有 
方法 。 
有 具体 使 用 时 可 以 根据 自己 的 需求 来 设置 切入 点 的 匹配 规则 。 当 然 ， 匹 配 的 规则 和 关键 
字 还 有 很 多 ， 可 参考 Spring 的 开发 手册 学 习 。 
(7) 在 com.ssm 包 中 创建 测试 类 TestAOP.java， 代 码 如 下 所 示 : 


Package com.ssm; 
import org.springframework.context.ApplicationContext; 
import 
org.springframework.context.support.ClassPathxmlApplicationContext; 
import com.ssm.service.ProductService; 
public class TestAOP { 
public static void main(String[] args) { 
// 初始 化 spring 容器， 加载 applicationContext .xml 配置 
ApplicationContext ctx = new 
ClassPathxXxmlApplicationContext ("applicationContext .xml"); 
// 通过 容器 获取 配置 中 productservice 的 实例 
ProductService ProductService = 
(ProductService)ctx.getBean("productService"); 
// 调用 productservice 中 的 browse 方法 


productService.browse(" 张 三 "，"Lenovo 天 逸 310"); 


} 

执行 测试 类 TestAOP， 控 制 台 输出 如 下 所 示 : 

前 置 通知 : 2018-06-24 22:10:24 张 三 浏览 商品 Lenovo 天 逸 310 

执行 业务 方法 browse 

从 控制 台 输出 可 以 看 出 ,在 业务 方法 browse 执行 前 , 先 输出 了 日 志 通 知 类 AllLogAdvice 
中 myBeforeAdvice 方法 产生 的 日 志 记录 。 


4.2.2 ”返回 通知 


返回 通知 是 指 在 连接 点 正常 执行 后 实施 增强 ， 不 管 是 正常 执行 完成 ， 还 是 抛 出 异常 ， 
都 会 执行 返回 通知 中 的 内 容 。 下 面 通过 示例 演示 如 何 实现 返回 通知 ， 其 过 程 如 下 所 示 : 
(1) 在 日 志 通 知 类 AllLogAdvice 中 添加 方法 myAfterRetumnAdvice， 作 为 返回 通知 。 
public void myAfterReturnadvice (JoinPoint joinPoint) { 
// 获取 方法 参数 
List<Object> args = Arrays-asList(joinPoint-getRArgs () ) > 


// 日 志 格式 字符 串 
String logInfoText = "返回 通知 : " 


2 Spring + Spring MVC + MyBatis 
框架 技术 精 讲 与 整合 案例 


+ new SimpleDateFormat ("yyyy-MM-dd HH:mm:ss") 


.format (new Date()) + " " + args.get(0).tostring() 
+ "浏览 商品 " + args.get(1) .tostring(); 
// 将 日 志 信息 输出 到 控制 台 


System.out.println(logInfoText); 


(2) 在 Spring 配置 文件 applicationContextxml 中 的 <aop:aspect> 元 素 内 添加 
<aop:after-returning> 元 素 ， 将 AllLogAdvice 日 志 通 知 类 中 的 myAfterReturnAdvice 方法 指定 
为 返回 通知 。 

<aop:after-returning method="myAfterReturnAdvice" 

pointcut-ref="logpointcut" /> 

将 applicationContextxml 中 前 置 通知 的 <aop:before> 配 置 加 以 注释 ， 再 执行 测试 类 
TestAOP， 控 制 台 输出 如 下 所 示 : 

执行 业务 方法 browse 

返回 通知 : 2018-06-25 13:34:18 张 三 浏览 商品 Lenovo 天 逸 310 

从 控制 台 输出 可 以 看 出 , 在 业务 方法 browse 执行 后 才 输 出 日 志 通知 类 AllLogAdvice 中 
myAfterReturnAdvice 方法 产生 的 日 志 记 录 。 


4.2.3 ”异常 通知 


异常 通知 在 连接 点 抛 出 异常 后 执行 ， 下 面 通过 示例 演示 如 何 实现 异常 通知 ， 其 过 程 如 
下 所 示 : 
(1) 修改 ProductServiceImpl 类 中 的 browse 方法 ， 人 为 抛 出 一 个 异常 。 


Package com.ssm.service.impl; 
import com.ssm.service.ProductService; 
public class ProductServiceImpl implements ProductService { 
@Override 
public void browse (String loginName, String productName) { 
System.out.println ("执行 业务 方法 browse"); 
// 演示 异常 通知 时 ， 人 为 抛 出 该 异常 
throw new RuntimeException (" 这 是 特意 抛 出 的 异常 信息 ! ") ; 


} 
(2) 在 日 志 通知 类 AllLogAdvice 中 添加 方法 myThrowingAdvice， 作 为 异常 通知 。 


public void myThrowingadvice (JoinPoint joinPoint, Exception e) { 
// 获取 被 调用 的 类 名 
String targetClassName = joinPoint .getTarget () .getClass () .getName () 7 
// 获取 被 调用 的 方法 名 
String targetMethodName = joinPoint.getSignature () .getName ()7 
// 日 志 格式 字符 串 
String logInfoText = "异常 通知 : 执行 " + targetclassName + "类 的 " 
+ targetMethodName + "方法 时 发 生 异 常 "; 
// 将 日 志 信息 输出 到 控制 台 
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System.out.println(logInfoText); 
} 


(3) 在 Spring 配置 文件 applicationContextxml 中 的 <aop:aspect> 元 素 内 添加 
<aop:after-throwing> 元 素 ， 将 AllLogAdvice 日 志 通 知 类 中 的 myThrowingAdvice 方法 指定 为 
异常 通知 。 

<aop:after-throwing method="myThrowingAdvice" 

pointcut-ref="logpointcut" throwing="eé" /> 

将 applicationContext.xml 中 前 置 通知 的 <aop:before> 和 返回 通知 的 <aop:after-returning> 
配置 加 以 注释 ， 再 执行 测试 类 TestAOP， 控 制 台 输出 如 下 所 示 : 

执行 业务 方法 browse 

异常 通知 : 执行 com. ssm. service. impl .ProductServiceImpl 类 的 browse 方法 时 发 生 异 常 

Exception in thread "main" java.lang.RuntimeException: 这 是 特意 抛 出 的 异常 信息 ! 

从 控制 台 输出 可 以 看 出 ,在 执行 业务 方法 browse 时 ， 输 出 日 志 通知 类 AllLogAdvice 中 
myThrowingAdvice 方法 产生 的 日 志 记录 。 


4.2.4 ”环绕 通知 


环绕 通知 围绕 在 连接 点 前 后 ， 比 如 一 个 方法 调用 的 前 后 ， 这 是 最 强大 的 通知 类 型 ， 能 
在 方法 调用 前 后 自 定义 一 些 操作 。 环 绕 通知 还 需要 负责 决定 是 继续 处 理 joinPoint， 还 是 中 
断 执行 。 下 面 通过 示例 演示 如 何 实 现 环绕 通知 ， 其 过 程 如 下 所 示 : 
(1) 修改 ProductServiceImpl 类 中 的 browse 方法 , 通过 while 循环 延长 方法 的 执行 时 间 。 
public void browse (String loginName, String mealName) { 
System.out.println ("执行 业务 方法 browse"); 
int i = 100000000; 
while (i > 0) { 


} 
} 


(2) 在 日 志 通知 类 AllLogAdvice 中 添加 方法 myAroundAdvice， 作 为 环绕 通知 。 


Public void myAroundAdvice (ProceedingJoinPoint joinPoint) throws Throwable 
| 

long beginTime = System.currentTimeMillis(); 

joinPoint.proceed(); 

long endTime = System.currentTimeMillis(); 

// 获取 被 调用 的 方法 名 

String targetMethodName = joinPoint .getSignature() .getName () 7 

// 日 志 格式 字符 串 

String logInfoText = "环绕 通知 : " + targetMethodName + "方法 调用 前 时 间 " + 
beginTime + "毫秒 ,” + "调用 后 时 间 " + endTime + "毫秒 。"; 

// 将 日 志 信息 输出 到 控制 台 


System.out.println(logInfoText); 
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ProceedingJoinPoint 对 象 是 JoinPoint 的 子 接口 ， 该 对 象 只 用 在 @Around 的 切面 方法 中 。 
(3) 在 Spring 配置 文件 applicationContextxml 中 的 <aop:aspect> 元 素 内 添加 <aop:around> 
元 素 ， 将 AllLogAdvice 日 志 通知 类 中 的 myAroundAdvice 方法 指定 为 环绕 通知 。 


<aop:around method="myAroundAdvice" pointcut-ref="logpointcut" /> 


将 applicationContext.xml 中 前 置 通知 的 <aop:before>、 返 回 通 知 的 <aop:after-returning> 
和 异常 通知 的 <aop:after-throwing> 元 素 配 置 加 以 注释 ， 青 执行 测试 类 TestAOP， 控 制 台 输出 
如 下 所 示 : 

执行 业务 方法 browse 

环绕 通知 :browse 方法 调用 前 时 间 1529906757688 毫秒 , 调用 后 时 间 1529906757702 毫秒 。 


从 控制 台 输 出 可 以 看 出 ， 通 过 环绕 通知 可 以 记录 业务 方法 browse 执行 前 后 的 时 间 。 


4.3 ”基于 @AspectJ 注解 的 AOP 实现 


基于 XML 配置 文件 的 AOP 实现 免不了 在 Spring 配置 文件 中 配置 大 量 的 信息 ， 不 仅 配 
置 麻烦 ， 而 且 会 造成 配置 文件 爱 肿 。 为 了 解决 这 个 问题 ，Aspect] 框架 为 AOP 的 实现 提供 
了 一 套 注解 ， 用 以 取代 Spring 配置 文件 中 为 实现 AOP 功能 所 配置 的 腔 肿 代码 。 
AspectJ 是 一 个 面向 切面 的 框架 ， 它 扩展 了 Java 语言 、 定 义 了 AOP 语法 ， 能 够 在 编译 
期 提供 代码 的 织 入 ， 并 提供 了 一 个 专门 的 编译 器 用 来 生成 遵守 字 节 编码 规范 的 Class 文件 。 
@AspectJ 是 AspectJ 5 新 增 的 功能 ， 使 用 JDK 5.0 注解 技术 和 正规 的 Aspect] 切 点 表达 式 语 
言 描述 切面 。 因 此 在 使 用 @Aspect] 之 前 ， 需 要 保证 JDK 是 5.0 或 更 高 版 本 ， 否 则 将 无 法 使 
用 注解 技术 。Spring 通过 集成 AspectJ 实现 了 以 注解 的 方式 定义 切面 ， 大 大 减轻 了 配置 文件 
的 工作 量 ， 此 外 ， 因 为 Java 的 反射 机 制 无 法 获取 方法 参数 名 ，Spring 还 需要 利用 轻 量 级 的 
字 节 码 处 理 asm( 已 集成 在 Spring Core 模块 中 ) 来 处 理 @AspectJ 中 所 描述 的 方法 参数 名 。 关 
于 AspectJ 注解 的 说 明 如 下 所 示 。 
@  @Aspect: 用 于 定义 一 个 切面 。 
@ ”@Pointcut: 用 于 定义 一 个 切入 点 ， 切 入 点 的 名 称 由 一 个 方面 名 称 定义 。 在 使 用 时 
还 需要 定义 一 个 包含 名 字 和 任意 参数 的 方法 签名 来 表示 切入 点 名 称 。 实 际 上 ， 这 
个 方法 签名 就 是 一 个 返回 值 为 void 且 方 法 体 为 空 的 普通 方法 。 
8 @Before: 用 于 定义 一 个 前 置 通知 ， 相 当 于 BeforeAdvice。 在 使 用 时 ， 通 常 需 要 指 
定 一 个 value 属性 值 , 该 属性 值 用 于 指定 一 个 切入 点 表达 式 (可 以 是 已 有 的 切入 点 ， 
也 可 以 直接 定义 切入 点 表达 式 )。 
@  @AfterReturning: 用 于 定义 一 个 后 置 通知 ， 相 当 于 AfterReturningAdvice。 在 使 用 
时 可 以 指定 pointecut、value 和 retuming 属性 ， 其 中 pointcut 和 value 这 两 个 属性 的 
作用 一 样 ， 都 用 于 指定 切入 点 表达 式 。retuming 属性 用 于 表示 Advice 方法 中 可 定 
义 与 此 同名 的 形 参 ， 该 形 参 可 用 于 访问 目标 方法 的 返回 值 。 
e  @AfterThrowing: 用 于 定义 一 个 异常 通知 ,相当 于 ThrowAdvice。 在 使 用 时 可 指定 
pointcut、value 和 throwing 属性 ， 其 中 pointcut 和 value 属性 用 于 指定 切入 点 表达 
式 ， 而 throwing 属性 用 于 访问 目标 方法 抛 出 的 异常 ， 该 属性 值 与 异常 通知 方法 中 


@< et ee a ee a ee TE et 


同名 的 形 参 一 致 。 
e @Around: 用 于 定义 一 个 环绕 通知 ， 相 当 于 MethodInterceptor。 在 使 用 时 需要 指定 
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一 个 value 属性 ， 该 属性 用 于 指定 该 通知 被 植 入 的 切入 点 。 


e@ @After: 用 于 定义 最 终 final 通知 ， 不 管 是 否 异常 ， 该 通知 都 会 执行 。 使 用 时 需要 


指定 一 个 value 属性 ， 该 属性 用 于 指定 该 通知 被 植 入 的 切入 点 。 


为 了 使 读者 快速 掌握 这 些 注解 ， 接 下 来 使 用 @AspectJ 注解 重新 实现 4.2 小 节 中 的 


AllLogAdvice 日 志 类 功能 ， 步 又 如 下 所 示 : 


(1) 将 项 目 spring-5 复制 并 重 命名 为 “spring-6”， 再 导入 到 Eclipse 开发 环境 中 。 
(2) 在 项 目 spring-6 中 ， 修 改 ProductService 接口 的 实现 类 ProductServiceImpl， 在 类 上 
添加 @Component("productService") 注 解 , 在 Spring 容器 中 自动 创建 ProductServiceImpl 类 的 


Bean 实例 。 


@Component ("productService") 
public class ProductServiceImpl implements ProductService { 


} 


(3) 修改 日 志 通 知 类 AllLogAdvice， 使 用 注解 定义 Bean、 切 面 、 切 点 和 4.2 小 节 中 的 四 
种 类 型 通知 。 


Package com. 


import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
import 
/太太 


java. 
java. 
java. 
java. 
org. 
org. 
org. 
org. 
org. 
org. 
org. 
org. 
org. 


ssm.aop; 
text.SimpleDateFormat; 
util.Arrays; 
util.Date; 

util.List; 

aspectj. 
aspectj. 
aspectj. 
aspectj. 
aspectj. 
aspectj. 
aspectj. 
aspectj. 


lang. 
lang. 
lang. 
lang. 
lang. 
lang. 
lang. 
lang. 


JoinPoint; 


ProceedingJoinPoint; 


annotation. 
annotation. 


annotation 
annotation 
annotation 


AfterReturning; 
AfterThrowing; 


-Around; 
.Aspect; 
.Before; 
annotation. 


Pointcut; 


springframework.stereotype.Component; 


* 定义 切面 类 ， 在 此 类 中 编写 通知 


* 


@Aspect 


@Component 
public class AllLogAdvice { 
// 定义 切入 点 表达 式 


@Pointcut ("execution(* com.ssm.service.ProductService.*(.. 


// 使 用 一 个 返回 值 为 void、 方 法 体 为 空 的 方法 来 命名 切入 点 
Private void allMethod() { 


» 


// 此 方法 将 作为 前 置 通知 
@Before ("allMethod () ") 


a | 
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public void myBeforeAdvice(JoinPoint joinPoint) { 
// 获取 业务 方法 参数 
List<Object> args = Arrays.asList (joinPoint.getArgs()); 
// 日 志 格式 字符 串 
String logInfoText = "前 置 通知 : " 
+ new SimpleDateFormat ("yyyy-MM-dd HH:mm:ss").format (new 


Date()) + " " + args.get(0) .toSstring() 
+ "浏览 商品 ”+ args.get(1) .tostring(); 
// 将 日 志 信息 输出 到 控制 台 
System.out.println (logInfoText); 
} 
// 此 方法 将 作为 返回 通知 
@AfterReturning ("allMethod() ") 
public void myAfterReturnAdvice(JoinPoint joinPoint) { 
// 获取 方法 参数 
List<Object> args = Arrays.asList (joinPoint.getArgs()); 
// 日 志 格式 字符 串 
String logInfoText = "返回 通知 : " 
+ new SimpleDateFormat ("yyyy-MM-dd HH:mm:ss") .format (new 
Date()) + " " + args.get (0) .toString() 
+ " 浏览 餐 品 " + args.get(1) .tostring(); 
// 将 日 志 信 息 输出 到 控制 台 


System.out.println (logInfoText); 


} 
// 此 方法 将 作为 异常 通知 
@AfterThrowing (pointcut="allMethod()",throwing="e") 
public void myThrowingAdvice(JoinPoint joinPoint, Exception e) { 
// 获取 被 调用 的 类 名 
String targetClassName = 
joinPoint .getTarget () .getClass () .getName (); 
// 获取 被 调用 的 方法 名 
String targetMethodName = joinPoint.getSignature () .getName () 7 
// 日 志 格式 字符 串 
String logInfoText = "异常 通知 : 执行 ”+targetclassName + "类 的 "+ 
targetMethodName + "方法 时 发 生 异 常 "; 
// 将 日 志 信息 输出 到 控制 台 
System.out.println (logInfoText); 
} 
// 此 方法 将 作为 环绕 通知 
@Around ("allMethod()") 
public void myAroundAdvice (ProceedingJoinPoint joinPoint) throws 
Throwable { 
long beginTime = System.currentTimeMillis(); 


joinPoint.proceed(); 


long endTime = System.currentTimeMillis(); 


// 获取 被 调用 的 方法 名 
String targetMethodName = joinPoint.getSignature() .getName (); 


// 日 志 格式 字符 串 
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String logInfoText = "环绕 通知 : " + targetMethodName + "方法 调用 前 时 
间 " + beginTime + "毫秒 , ”+ "调用 后 时 间 " + endTime + "毫秒 "; 
// 将 日 志 信息 输出 到 控制 台 


System.out.println (logInfoText); 


} 


在 AllLogAdvice 类 上 ， 首 先 使 用 @Aspect 注解 定义 了 切面 类 ， 由 于 该 类 在 Spring 中 是 
作为 组 件 使 用 的 ， 所 以 还 需要 添加 @Component 注解 才能 生效 ， 使 用 @Component 注解 在 
Spring 容器 中 自动 创建 AllLogAdvice 类 的 Bean 实例 ; 然后 使 用 @Pointcut 注解 定义 一 个 切 
入 点 ， 切 入 点 的 名 字 为 alMethod0 ， 切 入 点 的 正则 表达 式 execution(* 
com.ssm.service.ProductService.*(..)) 的 含义 是 对 com.ssm.service.ProductService 接口 中 的 所 
有 方法 进行 拦截 ;再 分 别 使 用 @Before、@AfterRetuming、@AfterThrowing 和 @Around 注 
解 定义 前 置 通知 、 返 回 通知 、 异 常 通知 和 环绕 通知 ， 这 些 通知 中 的 代码 含义 与 前 一 小 节 相 
同 ， 此 处 不 再 次 述 。 

(4) 修改 Spring 配置 文件 ， 配 置 自动 扫描 的 包 ， 并 在 配置 文件 中 开启 基于 @AspectJ 切 
面 的 注解 处 理 器 。 


<?xml version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.0rg/2001/xMLSchema-instance" 
xmlns:aop="http://www.springframework.org/schema/aop" 
xmlns:context="http://www.springframework.org/schema/context" 
xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd 
http://www.springframework.org/schema/aop 
http://www.springframework.org/schema/aop/spring-aop.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context.xsd"> 
<!-- 配置 自动 扫描 的 包 --> 
<context:component-scan base-package="com.ssm" /> 
<!-- 开启 基于 @AspectJ 切面 的 注解 处 理 器 --> 
<aop:aspectj-autoproxy /> 
</beans> 


由 于 Spring 配置 文件 中 使 用 了 <context> 和 <aop> 元 素 ， 因 此 需要 引入 context 和 aop 命 
名 空间 及 其 配套 的 schemaLocation。 

在 日 志 通知 类 AllLogAdvice 中 ， 依 次 启用 一 个 通知 方法 进行 测试 ， 将 其 他 通知 方法 加 
以 注释 , 并 根据 所 测试 通知 类 型 的 需要 , 修改 ProductServiceImpl 类 中 browse 方法 的 代码 ( 参 
考 4.2 小 节 )， 再 运行 测试 类 TestAOP， 效 果 与 4.2 小 节 相同 。 

基于 @ AspectJ 注解 的 AOP 实现 效果 与 基于 XML 配置 文件 的 AOP 实现 效果 相同 ， 相 
对 来 说 ， 使 用 注解 的 方式 更 加 简单 、 方 便 ，Spring 配置 文件 变 得 更 为 简洁 ， 所 以 在 实际 开 
发 中 推荐 使 用 注解 的 方式 进行 AOP 开发 。 
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4.4 小 0 


本 章 主要 介绍 了 Spring AOP 的 相关 概念 ， 并 以 日 志 通 知 为 例 先后 讲解 了 基于 XML 配 
置 文件 的 AOP 实现 和 基于 @Aspect 注解 的 AOP 实现 。 通过 对 比分 析 可 知 , 使 用 Spring 为 
AOP 实现 提供 的 一 组 注解 ， 极 大 地 简化 了 Spring 的 配置 。 
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通过 前 面 几 章 的 学 习 ， 读 者 应 该 对 Spring 框架 核心 技术 中 的 几 个 重要 模块 有 了 一 定 的 
了 解 。Spring 框架 降低 了 Java EE 的 使 用 难度 ，Spring 为 开发 者 提供 了 JDBC 模板 模式 ， 那 
就 是 JdbcTemplate， 它 降低 了 JDBC 的 使 用 难度 。 本 章 将 对 Spring 中 的 JDBC 知识 进行 详 
细 讲 解 。 


5.1 Spring JDBC 
传统 的 JDBC 即使 执行 一 条 简单 的 SQL 语句 ， 其 过 程 也 不 简单 ， 要 先 打 开 数 据 库 连 接 
执行 SQL 语句 , 然后 组 装 结果 ,最 后 关闭 数据 库 资 源 , 但 太 多 的 try…catch…finally… 语 句 ， 
造成 了 代码 江洲 。 在 Spring 出 现 之 后 ， 为 了 解决 这 些 问题 ，Sbring 提供 了 自己 的 方案 ， 屠 


JDBC API 的 使 用 难度 ， 以 一 种 更 直接 、 
模块 负责 数据 库 资 源 管理 ， 本 去 
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JDBC 代码 失控 提供 的 解决 方案 。 该 类 作为 Spring JDBC 的 核心 类 ， 提供 了 对 所 有 数据 库 操 
作 功 能 的 支持 。 该 类 是 在 原始 JDBC 的 基础 上 , 构建 一 个 抽象 层 ,提供 许多 使 用 JDBC 的 模 
板 和 驱动 模块 ， 为 Spring 应 用 操作 关系 数据 库 提 供 了 更 大 的 便利 。 

JdbcTemplate 类 的 继承 关系 十 分 简单 ， 它 继承 了 抽象 类 JdbcAccessor， 同 时 实现 了 接口 


JdbcOperations 。 
在 抽象 类 JdbcAccessor 的 设计 中 ， 该 类 为 其 子 类 提供 了 一 些 访问 数据 库 时 的 公共 属性 ， 
具体 如 下 。 


@ 。 DataSource: 其 主要 功能 是 获取 数据 库 连 接 ， 具 体 实 现时 还 可 以 引入 对 数据 库 连 接 
的 缓冲 池 和 分 布 式 事务 的 支持 ， 它 可 以 作为 访问 数据 库 资源 的 标准 接口 。 

@ SQLExceptionTranslator: org.springframework.jdbc.support.SQLExceptionTranslator 
接口 负责 对 SQLException 进行 转译 。 通 过 必要 的 设置 或 者 获取 
SQLExceptionTranslator 中 的 方法 , 可 以 使 JdbcTemplate 在 需要 处 理 SQLException 
时 ， 委 托 SQLExceptionTranslator 的 实现 类 来 完成 相关 的 转译 工作 。 

在 JdbcOperation 接口 中 ,定义 了 通过 Jdbc 操作 数据 库 的 基本 操作 方法 , 而 JdbcTemplate 

类 提供 了 这 些 接口 方法 的 实现 ， 包 括 添 加 、 修 改 、 查 询 和 删除 等 操作 。 


5.1.2 Spring JDBC 的 配置 


Spring JDBC 模块 主要 由 4 个 包 组 成 ， 分 别 是 core( 核 心包 )、object( 对 象 包 )、dataSource( 数 
据 源 包 ) 和 support( 支 持 包 )。JdbcTemplate 类 就 在 核心 包 中 ， 该 类 包含 所 有 数据 库 操 作 的 基 
本 方法 。 关 于 这 4 个 包 的 具体 说 明 如 下 。 

@ core: 核心 包 ， 包 含 JDBC 的 核心 功能 ， 包 括 JdbcTemplate 类 、SimpleJdbcInsert 

类 、SimpleJdbcCall 类 以 及 NamedParameterJdbcTemplate 类 。 
@ “dataSource: 数据 源 包 ， 访 问 数据 源 的 实用 工具 类 ， 它 有 多 种 数据 源 的 实现 ， 可 以 
在 JavaEE 容器 外 部 测试 JDBC 代码 。 

@ object: 对 象 包 ， 以 面向 对 象 的 方式 访问 数据 库 ， 它 允许 执行 查询 并 返回 结果 作为 

业务 对 象 ， 可 以 在 数据 表 的 列 和 业务 对 象 的 属性 之 间 映 射 查询 结果 。 

@ ”support: 支持 包 ， 包 含 core 和 object 包 的 支持 类 ， 例 如 ， 提 供 异 常 转换 功能 的 

SQLException 类 。 

Spring 对 数据 库 的 操作 都 封装 在 这 几 个 包 中 ， 要 想 使 用 Spring JDBC， 就 需要 对 其 进行 
配置 。 在 Spring 中 ，JDBC 的 配置 是 在 配置 文件 applicationContext.xml 中 完成 的 ， 其 配置 模 
板 如 下 。 

<?xml version="1.0" encoding="UTF-8"?> 

<beans xmlns="http://www.springframework.org/schema/beans" 

xmlns:xsi="http://www.w3.0rg/2001/xMLSchema-instance" 


xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd"> 

<!-- 1. 配 置 数据 源 --> 

<bean id="dataSource" 
class="org.springframework.jdbc.datasource.DriverManagerDataSource"> 


<!-- 数据 库 驱 动 名 称 ， 不 同类 型 数据 库 的 名 称 --> 
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<property name="driverClassName" value="com.mysql.jdbc.Driver"/> 
<!-- 连接 数据 库 的 数据 源 所 在 的 url 地 址 --> 
<property name="url" value="jdbc:mysql://localhost:3306/eshop"/> 
<!-- 连接 数据 库 的 用 户 名 --> 
<property name="username" value="root"/> 
<!-- 连接 数据 库 的 密码 --> 
<property name="password" value="123456"/> 
</bean> 
<!-- 2. 配 置 JDBC 模板 --> 
<bean id="jdbcTemplate" 
class="org.springframework.jdbc.core.JdbcTemplate"> 
<!-- 默认 必须 使 用 数据 源 --> 
<property name="dataSource" ref="dataSource"></property> 
</bean> 
<!-- 3. 配 置 注入 的 实体 类 ， 以 下 是 模拟 代码 --> 
<bean id="xxx" class="Xxx"> 
<property name="jdbcTemplate" ref="jdbcTemplate"></property> 
</bean> 
</beans> 


上 述 代码 中 ，dataSource 的 配置 就 是 JDBC 连接 数据 库 时 所 需要 的 四 个 属性 ， 这 四 个 属 
性 需要 根据 数据 库 类 型 或 者 机 器 配置 的 不 同 设 置 相应 的 属性 值 。 如 果 数 据 库 类 型 不 同 ， 需 
要 更 改 驱动 名 称 ， 如 果 数 据 库 不 是 本 机 的 数据 库 ， 则 需要 将 地 址 中 的 localhost 蔡 换 成 相应 
主机 的 人 P 地 址 ， 如 果 修改 过 MySQL 数据 库 的 端口 号 (默认 为 3306)， 则 需要 改 为 修改 后 的 
端口 号 ; 同时 连接 数据 库 的 用 户 名 和 密码 需要 与 数据 库 创建 时 设置 的 用 户 名 和 密码 保持 一 致 。 

定义 JdbcTemplate 时 ， 需 要 将 dataSource 注入 到 JdbcTemplate 中 ， 而 其 他 需要 使 用 
JdbcTemplate 的 Bean, 也 需要 将 JdbcTemplate 注入 到 该 Bean 中 (通常 注入 到 数据 访问 层 Dao 
类 中 ， 在 Dao 类 中 进行 与 数据 库 的 相关 操作 )。 


5.2 JdbcTemplate 的 常用 方法 


在 JdbcTemplate 类 中 , 提供 了 大 量 的 查询 和 更 新 数据 库 的 方法 ，Spring JDBC 就 是 使 用 
这 些 方法 来 操作 数据 库 的 。 下 面 分 别 介 绍 execute() 方 法 、update() 方 法 和 query() 方 法 。 


5.2.1 execute() 方 法 


execute(String sql) 方 法 能 够 完成 执行 SQL 语句 的 功能 ， 下 面 以 创建 和 删除 数据 库 表 的 
SQL 语句 为 例 ， 来 讲解 此 方法 的 使 有 用， 具体 步 骤 如 下 。 

(1) 启动 前 端 工具 SQLyog, 用 来 管理 MySQL 数据 库 ， 选 中 左 侧 的 root@localhost 并 右 
击 ， 在 弹出 的 快捷 菜单 中 选择 “执行 SQL 脚本 ”命令 ， 在 弹出 的 对 话 框 中 选择 执行 源 代码 
中 提供 的 eshop.sql 脚本 ， 就 可 导入 eshop 数据 库 ， 如 图 5-1 所 示 。 
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SQLyog - [My/information_schema - root@localhost] 一 [| x* 

二 文件 六 绍 收 训 六 数 二 谍 表单 其 他 工具 高 级 工具 窗口 帮助 -1alx 
i 2 志 忆 请 | 大 瑟 轩 | :电池 大 
My x 从 一 个 文件 执行 查询 X 日 


加 因 4 局 新 对象 济 加 有 后 中 的 查询 ， 当 你 执行 没有 加 载 
全 长 9 民 ) 引导 的 于 汪 全 二 的 让 和 
日 mes CultD 

田间 园 歼 委 间 雪 CoshifrD 当前 数据 了 information_schema 
立 件 执行 


三 计划 备份 Cul+Alt+S > 
CR CatalyO | | [Fedpse -mortspace\13 代 友 eshop.sdl 末 


[3 a Cl+Shih+Q 
© 


回 发 生 模 误 时 届 出 关闭 


0sec 二 本:1 
图 5-1 执行 sql 脚本 导入 数据 库 


(2) 将 项 目 spring-1 复制 并 重 命名 为 “spring-7”， 再 导入 到 Eclipse 开发 环境 中 。 

(3) 在 前 面 已 经 添加 核心 包 的 基础 上 ， 向 项 目 中 添加 spring-jdbc-5.0.4.RELEASE.jar、 
spring-tx-5.0.4.RELEASE.jar 和 MySQL 数据 库 驱 动 mysql-connector-java-5.1.38-bin.jar。 把 3 
个 jar 文件 添加 到 项 目 spring-7 的 lib 目录 中 ， 再 将 这 些 jar 包 添 加 到 项 目的 构建 路 径 中 。 

(4) 修改 src 路 径 下 的 applicationContext.xml 文件 ， 在 该 文件 中 配置 id 为 dataSource 的 
数据 源 Bean 和 id 为 jdbcTemplate 的 JDBC 模板 Bean， 并 将 数据 源 注 入 到 JDBC 模板 中 。 
applicationContext.xml 配置 文件 的 内 容 如 下 。 


<?xml] version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.o0rg/2001/xXMLSchema-instance" 
xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd"> 
<!-- 1. 配 置 数据 源 --> 
<bean id="dataSource" 
class="org.springframework.jdbc.datasource.DriverManagerDataSource"> 
<!-- 数据 库 驱 动 名 称 ， 不 同类 型 数据 库 的 名 称 --> 
<property name="driverClassName" value="com.mysql.jdbc.Driver"/> 
<!-- 连接 数据 库 的 数据 源 所 在 的 url 地 址 --> 
<property name="url" value="jdbc:mysql://localhost:3306/eshop"/> 
<!-- 连接 数据 库 的 用 户 名 --> 
<property name="username" value="root"/> 
<!-- 连接 数据 库 的 密码 --> 
<property name="password" value="123456"/> 
</bean> 
<!-- 2. 配 置 JDBC 模板 --> 
<bean id="jdbcTemplate" 
class="org.springframework.jdbc.core.JdbcTemplate"> 
<!-- 默认 必须 使 用 数据 源 --> 


<property name="dataSource" ref="dataSource"></property> 
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</bean> 
</beans> 


(5) 在 com.ssm 包 中 创建 测试 类 TestJdbcTemplate， 在 main0) 主 方法 中 通过 Spring 容器 
获取 在 配置 文件 中 定义 的 JdbcTemplate 实例 ， 使 用 该 实例 的 execute(String sqD) 方 法 执行 创 
建 数据 表 的 SQL 语句 ， 如 下 所 示 : 


Package com.ssm; 
import org.springframework.context.ApplicationContext; 
import 
org.springframework.context.support.ClassPathxmlApplicationContext; 
import org.springframework.jdbc.core.JdbcTemplate; 
Public class TestJdbcTemplate { 
public static void main(String[] args) { 
// 初始 化 spring 容器， 加载 applicationContext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 通过 容器 ， 获 取 JdbcTemplate 的 实例 
JdbcTemplate jdbcTemplate = 
(JdbcTemplate)ctx.getBean ("jdbcTemplate"); 
String sql = "create table user(id int primary key auto increment, 
userName Varchar (20) ,password Varchar (32))"; 
// 使 用 execute () 方 法 执行 sQL 语句 ， 创 建 用 户 表 user 
jdbcTemplate.execute (sql); 
System.out.println ("用 户 表 user 创建 成 功 ! ")， 


} 


执行 测试 类 TestJdbcTemplate， 在 控制 台 输 出 “用 户 表 user 创建 成 功 ! ”的 提示 ， 查 看 
SQLyog， 在 eshop 数据 库 下 的 表 中 能 够 看 到 user 表 ， 如 图 5-2 所 示 。 


E” root@Localhost 
日 目 eshop 
日 四 到 

国 aqnin info 
国 functions 
国 order_detail 
国 order_info 
国 powers 
国 product_info 
国 type 


图 5-2 user 数据 表 创 建成 功 
5.2.2 update() 方 法 


update() 方 法 可 以 完成 插入 、 更 新 和 删除 操作 。 在 JdbcTemplate 类 中 ，update 方法 中 存 
在 多 个 重 载 的 方法 ， 其 常用 方法 具体 介绍 如 下 : 
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®@ intupdate(String sqD): 该 方法 是 最 简单 的 update 方法 重 载 形式 , 可 以 直接 传 入 SQL 
语句 并 返回 受 影响 的 行 数 。 


® int update(PreparedStatementCreator psc): 该 方法 执行 从 PreparedStatementCreator 

返回 的 语句 ， 然 后 返回 受 影响 的 行 数 。 

@ intupdate(String sql, PreparedStatementSetter pss): 该 方法 通过 PreparedStatementSetter 

设置 SQL 语句 中 的 参数 ， 并 返回 受 影响 的 行 数 。 

@ int update(String sql, Object...args): 该 方法 使 用 Object...args 设置 SQL 语句 中 的 参 

数 ， 要 求 参 数 不 能 为 空 ， 并 返回 受 影响 的 行 数 。 

接 下 来 ， 我 们 通过 一 个 用 户 账 户 管理 的 实例 来 实现 对 用 户 信息 的 插入 、 修 改 和 删除 操 
作 ， 上 有 具体 步骤 如 下 。 

(1) 在 spring-7 项 目 中 ， 新 建 com.ssm.entity 包 , 在 包 中 新 建 User 类 。 在 User 类 中 定义 
id、userName 和 password 属性 ， 并 为 属性 添加 setter/getter 方法 ， 重 写 toString() 方 法 ， 代 码 
如 下 : 

Package com.ssm.entity; 

public class User { 

private int id; // 用 户 id 
private String userName; // 用 户 名 


private String password; // 用 户 密码 
// 此 处 省 略 相 应 属性 的 setter/getter 方法 


// 重 写 tostring 方法 


@override 
public String toString() { 
return "User 对 象 : "+ id +" -- "+userName+" -- "+password; 


} 
} 


(2) 新 建 com.ssm.dao 包 ， 在 该 包 中 新 建 UserDAO 接口 ， 并 在 接口 中 定义 添加 、 修 改 、 
删除 用 户 的 方法 ， 代 码 如 下 : 


Package com.ssm.dao; 
import com.ssm.entity.User; 
public interface UserDAO { 
// 添加 用 户 
public int addUser (User user); 
// 修改 用 户 
public int updateUser (User user); 
// 删除 用 户 
public int deleteUser (int id) 7 


(3) 新 建 com.ssm.dao.impl 包 ， 在 该 包 中 创建 UserDAO 接口 的 实现 类 UserDAOImpl， 
并 在 类 中 实现 添加 、 修 改 和 删除 的 方法 ， 代 码 如 下 : 


Package com.ssm.dao.impl; 


import org.springframework.jdbc.core.JdbcTemplate; 
import com.ssm.dao.UserDAO; 


import com.ssm.entity.User; 
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Public class UserDAOImpl implements UserDAO{ 
// 声明 JdbcTemplate 属性 及 其 setter 方法 
private JdbcTemplate jdbcTemplate; 
public void setJdbcTemplate (JdbcTemplate jdbcTemplate) { 
this.jdbcTemplate = jdbcTemplate; 


i 

// 添加 用 户 

Qoverride 

public int addUser (User user) { 
String sql="insert into user(userName,password) values(?,2)"; 
// 使 用 数组 来 存储 SQL 语句 中 的 参数 
Object [] object=new Object[] {user.getUserName(), 

user.getPassword()}; 

// 执行 添加 操作 ， 返 回 的 是 受 se 语句 影响 的 记录 条 数 
int result=jdbcTemplate.update(sql,object); 
return result; 


} 

// 修改 用 户 

@override 

public int updateUser(User user) { 
String sql="update user set userName=?,password=? Where id=?"; 
// 使 用 数组 来 存储 SQL 语句 中 的 参数 
Object[] params=new Object[] 

{user.getUserName (),user.getPassword(),user.getId()}; 

// 执行 修改 操作 ， 返 回 的 是 受 SQL 语句 影响 的 记录 条 数 
int result=jdbcTemplate.update(sql,params); 
return result; 


} 
// 删除 用 户 


@Ooverride 

public int deleteUser(int id) { 
String sql="delete from user where id=?"7 
// 执行 删除 操作 ， 返 回 的 是 受 se&L 语句 影响 的 记录 条 数 
int result=jdbcTemplate.update (sql,id); 
return result; 


} 


在 上 述 的 添加 、 修 改 和 删除 的 代码 中 可 以 看 出 它们 实现 的 步骤 类 似 ， 只 是 定义 的 SQL 
语句 有 所 不 同 。 
(4) UserDAOImpl 类 中 有 对 JdbcTemplate 类 的 引用 , 因此 要 在 applicationContext.xml 文 
件 中 实现 UserDAOImpl 对 JdbcTemplate 类 的 依赖 注入 ， 需 修改 applicationContext.xml 配置 
文件 , 定义 一 个 记 为 userDAO 的 Bean, 该 Bean 用 于 将 jdbcTemplate 注入 到 userDAO 实例 
中 ， 其 代码 如 下 : 
<!-- 配置 一 个 id 为 userDao 的 Bean --> 
<bean id="userDAO" class="com.ssm.dao.impl.UserDAOImp1"> 
<!-- 将 jdbcTemplate 注入 到 userDao 实例 中 --> 


<property name="jdbcTemplate" ref="jdbcTemplate"/> 
</bean> 
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(5) 在 测试 类 TestJdbcTemplate 中 ,添加 一 个 JUnit4 类 型 的 单元 测试 方法 addUserTest(O， 
该 单元 测试 方法 主要 用 于 添加 用 户 信息 ， 具 体 步 又 如 下 。 


@ 选择 要 添加 单元 测试 的 项 目 并 右 击 ， 选 择 Build Path 一 Configure Build Path 命令 ， 
如 图 5-3 所 示 。 


’ BS spring Sa 团 纺 ink source.. 
Source Al+Shift+S > 二 New Source Folder.. 
Br Refactor Alt+Shift+T > 
到 JRES 

融 Refet i lmport. 

Blib 区 Expert. 


Use as Source Folder 
BB Add External Archives.. 
吉 Add Libraries.. 


Refresh F5 ey Configure Build Path 


5-3 ”Build Path 构建 路 径 


@ 在 弹出 的 Java Build Path 对 话 框 中 ， 选 择 Libraries 选项 卡 ， 然 后 选中 Classpath， 单 


击 右 侧 的 Add library 按钮 ， 在 Add Library 界面 中 ， 选 择 JUnit， 单 击 Next 按钮 ， 如 图 5-4 
所 示 。 


@ 在 JUnit Library 界面 中 , 在 JUnit library version 下 拉 列 表 框 中 选择 单元 测试 的 版 本 ， 
这 里 我 们 选择 JUnit 4， 单 击 Finish 按钮 完成 ， 如 图 5-5 所 示 。 


国 Add Ubrary 二 国 Add Ubray oO x 
Add Library 
Salecr the fbrary ype to add EY JUnit Library 
二 — 一 一 Select the JUnit version to use in this project. 三 
RL 一 一 
JRE System Libra' JUnit library version: JUnit 4 ~ 
Maven Managed Depondoncies Current location: & junitjar - FAProgram Files\eclipse\plugins 
Dependence Morgjunit 4.12.0v201504281640 
To Source location: Not found 
Web App Dbraries 
® ”加 a @ < Bock Next > [ere 
图 5-4 选择 JUnit 图 5-5 选择 JUnit 4 版 本 
图 回 到 Java Build Path 对 话 框 ， 可 以 看 到 添加 了 单元 测试 包 ， 单 击 Apply and Close 按 


钮 ， 如 图 5-6 所 示 。 


Java Bulld Path 


® Source (3 Projects BM Librares Ny Drder and Export 
JARe and clacs folders cn the buid path: 
~ Ws Mocdiepeth 


ie 
ystem Library avaSE-A)] 
i 9 Md Exterral JR- 
ons looging 12ar - FVecipse-workspace\s| ORT 
A tbeary, 
TT 


EE 


Semove 


re JAR le 


appy 


[rr 


5-6 添加 JUnit 成 功 


@< Sa ea a A 


第 5 章 Spring 的 数据 库 编程 


@ 添加 一 个 JUnit4 类 型 的 单元 测试 方法 addUserTest0， 代 码 如 下 : 


@Test 
public void addUserTest() { 
// 初始 化 spring 容器， 加载 applicationContext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 通过 spring 容器 ， 获 取 UserDAo 的 实例 
UserDAO userDAO = (UserDAO)ctx.getBean ("userDAO"); 
// 创建 User 对 象 ， 并 向 User 对 象 中 添加 数据 
User user=new User() 7 
user.setUserName ("yzpc"); 
user.setPassword ("yzpc"); 
// 执行 adqUser () 方 法 ， 并 获取 返回 结果 
int result=userDAO.addUser (user); 
if (result>0) { 
System.out.println(" 成 功 往 数据 表 中 插入 了 "+result+" 条 数据 ! ") ; 
jelse |{ 
System.out.println(" 往 数据 表 中 插入 数据 失败 ! ") 7 
} 
} 


在 上 述 代码 中 ， 获 取 了 UserDAO 的 实例 后 ， 又 创建 了 User 对 象 ， 并 为 User 对 象 的 属 
性 赋值 。 而 后 调用 UserDAO 对 象 的 addUser0 方 法 向 数据 表 中 添加 一 条 数据 。 最 后 ,通过 返 
回 的 受 影响 的 行 数 来 判断 数据 是 否 插 入 成 功 。 

用 鼠标 右键 单 击 addUserTest0 方 法 ， 在 弹出 的 快捷 菜单 中 选择 Run As 一 JUnit Test 
命令 来 运行 测试 方法 ， 如 图 5-7 所 示 。 


Brest Coverage As 》 
public void addUserTesi Run As SD 1Java Application Ak+Shift+X J 
// 初始 化 spring 容 器 ， Debug As ) Jo 2JUnitTest At+Shift+X T 
ApplicationContext 
/7 请 讨 窒 器, 薄 取 Uce| Po 合生 》 Run Configurations.. 


5-7 运行 JUnit 
@ 选择 JUnit Test 命令 后 , Eclipse 中 会 出 现 一 个 名 为 JUnit 的 视窗 窗口 ,如 图 5-8 所 示 。 


网 problems @ Javadoc 加 Declaration 四 console do JUnit 己 四 昌 轩 |QB 因 ~ > 一 口 
Finished after 0.967 seconds 
Runs 1/1 日 Errors 0 a Failures: 0 [| 
图 addUserTest [Runner: JUnit 4] (0.945 s) Failure Trace CE 


图 5-8 JUnit 控制 台 


在 图 5-8 中 ，JUnit 视窗 窗口 的 进度 条 为 绿色 表明 运行 结构 正确 ， 如 果 进 度 条 为 红色 则 
表示 有 错误 ， 并 且 会 在 窗口 中 显示 所 报 的 错误 信息 。 

测试 执行 通过 后 ， 从 Console 控制 台 的 输出 结果 可 以 看 出 ，addUserTest() 方 法 已 经 执行 
成 功 ， 如 图 5-9 所 示 。 


Spring + Spring MVC + MyBatis 
架 技 术 精 讲 与 整合 案例 


网 problems @ Javadoc 网 Dedaration 是 consoke 2 duJunt 轩 潜 繁 | 访 寻 已 略图 -中 -=-0o 
<terminated> TestJdbcTemplate.addUserTest [ DUnit] Fi\Program PilesVavaVire- 9.0.4\binVavaw.exe (2018 年 6 月 27 日 上 午 1:25:20) 


Loading XML bean definitions from class path resource [applicationContext.xml] 四 
,2818 1:25:21 上 午 org.springframework.jdbc.datasource.DriverManagerDataSource setDriverC] 
信息 : Loaded JDBC driver: com.mysql.jdbc.Driver 

Wed Jun 27 61:25:21 CST 2818 WARN: Establishing SSL connection without server's identity verifi 


成 功 往 数据 表 中 插入 了 1 条 数据 ! v 
5-9 添加 记录 运行 结果 


此 时 ， 可 以 通过 SQLyog 查看 数据 中 的 user 表 ，user 表 中 新 插入 了 一 条 数据 。 
(6) 执行 完 添加 用 户 操 作 后 , 接 下 来 使 用 JdbcTemplate 类 的 update() 方 法 执行 更 新 操作 ， 
在 测试 类 TestJdbcTemplate 中 ， 添 加 一 个 测试 方法 updateUserTest0， 其 代码 如 下 : 


@Test 

Public void updateUserTest() { 
// 初始 化 spring 容器 ， 加 载 applicationContext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 通过 容器 ， 获 取 UserDRo 的 实例 
UserDAO userDRO = (UserDRO) ctx.getBean ("userDRO") 7 
// 创建 User 对 象 ， 并 向 User 对 象 中 添加 数据 
User user=new User() 
user.setId(1); 
user.setUserName ("yzpc"); 
user.setPassword("123456"); 
// 执行 updateUser () 方 法 ， 并 获取 返回 结果 
int result=userDAO.updateUser (user); 
if (result>0) { 

System.out.println ("成 功 修改 了 "+result+" 条 数据 ! "); 

}jelse | 


System.out.println ("修改 操作 执行 失败 ! "); 


} 


与 addUserTest0 方 法 相 比 ， 修 改 操作 的 代码 增加 了 id 属性 值 的 设置 ， 并 将 密码 修改 为 
123456 后 ， 调 用 了 UserDAO 对 象 中 的 updateUser() 方 法 执行 对 数据 表 的 修改 操作 。 

使 用 JUnit4 运行 updateUserTest0 方 法 后 ， 从 Console 控制 台 的 输出 结果 看 出 ， 
updateUserTest() 方 法 已 经 执行 成 功 ， 如 图 5-10 所 示 。 


区 problems @ Javadoc 加 Declaration 目 Console 53 gmJUnit 一 
四 XX 六 | 妃 辣 序 | 加 加 上- 了- 

<terminated> TestJdbcTemplate.updateUserTest JUnit] F\Program FilesJava\jre-9.0.4\bin\javaw.exe (2018 年 6 月 27 日 下 午 12:07: 

6 月 27，2618 12:87:48 下 午 org.springframework.jdbc.datasource.DriverManagerDataSource setDri^ 

信息 : Loaded JDBC driver: com.mysql.jdbc.Driver 

Wed Jun 27 12:87:41 CST 2618 WARN: Establishing SSL connection without server's identity ve 


成 功 修改 了 1 条 数据 ! 


5-10 ”修改 记录 运行 结果 
再 次 查询 数据 库 中 的 User 表 ， 其 结果 如 图 5-11 所 示 。 
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口 | 所 |userName |password 
口 | 1lyzpc 123456 


5-11 修改 后 的 User 表 


(7) 修改 记录 后 ， 在 测试 类 TestJdbcTemplate 中 ， 添 加 一 个 测试 方法 deleteUserTest(0 来 
执行 删除 操作 ， 其 代码 如 下 : 


@Test 

Public void deleteUserTest() { 
// 初始 化 spring 容器 ， 加 载 applicationContext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 通过 容器 ， 获 取 UserDao 的 实例 
UserDAO userDAO = (UserDRO) ctx.getBean("userDRO") 7 
// 执行 deleteUser () 方 法 ， 并 获取 返回 结果 
int result=userDAO.deleteUser (1) 7 
if (result>0) { 


System.out.println ("成 功 删除 了 "+result+" 条 数据 ! "); 
jelse |{ 


System.out.println ("删除 操作 执行 失败 ! ") ; 
} 
} 


上 述 代 码 中 , 获取 了 UserDAO 的 实例 后 , 执行 实例 中 的 deleteUser0 方 法 来 删除 id 为 1 
的 数据 (id=1 的 数据 要 在 数据 表 中 存在 )。 使 用 JUnit4 运行 deleteUserTest() 方 法 后 , 从 Console 
控制 台 的 输出 结果 看 出 ，deleteUserTest() 方 法 已 经 执行 成 功 ， 如 图 5-12 所 示 。 


| problems @ Javadoc 加 Declaration 是 Console 3 coJUnit he 
国 关 六 | 区 好 访 | 吕 加 中 昌 - 叶 > 
<terminated> TestJdbcTemplate.deleteUserTest JUnit] F:\Program FilesJava\jre-9.0.4\bin\Vavaw.exe (2018 年 6 月 27 日 下 午 12:32:5 


6 月 27，2e818 12:32:51 下 午 org.springframework.jdbc.datasource.DriverManagerDataSource setDrji^ 
信息 : Loaded JDBC driver: com.mysql.jdbc.Driver 
Wed Jun 27 12:32:52 CST 2618 WARN: Establishing SSL connection without server's identity ve 


成 功 删 除了 1 条 数据 ! 


图 5-12 ”删除 记录 运行 结果 
再 次 查询 数据 库 中 的 User 表 ， 发 现 id 为 1 的 记录 已 经 被 删除 。 


5.2.3 ”query() 方 法 


JdbcTemplate 对 JDBC 的 流程 做 了 封装 ， 提 供 了 大 量 的 query0 方 法 来 处 理 各 种 对 数据 
库 表 的 查询 操作 ， 常 用 的 query0 方 法 如 下 。 

@ Listquery(String sql, PreparedStatementSetterpss, RowMapper rowMapper): 该 方法 根 
据 String 类 型 参数 提供 的 SQL 语句 创建 PreparedStatement 对 象 , 通过 RowMapper 
将 结果 返回 到 List 中 。 

® List query(String sql,.Object[] args, RowMapper rowMapper): 该 方法 使 用 Object[] 的 
值 来 设置 SQL 中 的 参数 值 ， 采 用 RowMapper 回调 方法 可 以 直接 返回 List 类 型 的 
数据 。 
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® queryForObject(String sqLObject[]args, RowMapper rowMapper): 该 方法 将 args 参数 
绑 定 到 SQL 语句 中 ， 通 过 RowMapper 返回 单行 记录 ， 并 转换 为 一 个 Object 类 型 
返回 。 

@ queryForList(String sql, Object[] args, class<T>elementType): 该 方法 可 以 返回 多 行 

数据 的 结果 ， 但 必须 是 返回 列表 ，elementType 参数 返回 的 是 List 元 素 类 型 。 

了 解 了 几 个 常用 的 query0 方 法 后 , 接 下 来 , 我 们 尝试 从 user 表 中 查询 数据 , 在 UserDAO 
接口 中 增加 按照 id 查询 的 方法 和 查询 所 有 用 户 的 方法 , 在 UserDAOImpl 中 具体 实现 两 个 方 
法 ， 实 现 步 骤 如 下 。 

(1) 首先 通过 SQLyog 工具 向 user 表 中 插入 几 条 数 Ola lee sss mm 
据 ， 插 入 后 user 表 中 的 数据 如 图 5-13 所 示 。 2zhangsan |123456 


oooo 


(2) 在 UserDAO 中 , 分别 创建 一 个 通过 id 查询 单个 3l1isi 123 
用 户 信息 和 查询 所 有 用 户 信息 的 方法 ， 代 码 如 下 : ER 

// 通过 id 查询 图 5-13 User 表 

public User findUserByIdl(int id) 7 

// 查询 所 有 用 户 


public List<User> findAllUser(); 


(3) 在 UserDAO 接口 的 实现 类 UserDAOImpl 中 ， 实 现 接口 中 的 方法 ， 并 使 用 query0 
方法 分 别 进行 查询 ， 代 码 如 下 : 
// 通过 id 查询 用 户 信息 


@Override 
public User findUserByIdl(int id) { 
// 定义 单个 查询 的 SQL 语句 
String sql="select * from user where id=?"; 
// 创建 一 个 新 的 BeanPropertyRowMapper 对 象 ,将 结果 集 通过 Java 的 反射 机 制 映射 到 
Java 对 象 中 
RowMapper<User> rowMapper=new BeanPropertyRowMapper<User> (User.class); 
// 将 id 绑 定 到 seQL 语句 中 ， 并 通过 RowMapper 返回 一 个 object 类 型 的 对 象 
return this.jdbcTemplate.queryForObject (sql, rowMapper, id) 


} 
// 查询 所 有 用 户 信息 
@Override 
public List<User> findAllUser() { 
// 定义 查询 所 有 用 户 的 sQL 语句 
String sql="select * from User"; 
// 创建 一 个 新 的 BeanPropertyRowMapper 对 象 
RowMapper<User> rowMapper=new BeanPropertyRowMapper<User> (User.class); 
/ /执行 静态 的 SQL 查询 ， 并 通过 RowMapper 返回 结果 
return this.jdbcTemplate.query (sql, rowMapper); 


在 UserDAOImpl 实现 类 的 方法 中 , BeanPropertyRowMapper 是 BeanMapper 接口 的 实现 
类 ， 它 可 以 自动 地 将 数据 表 中 的 数据 映射 到 用 户 定义 的 类 中 (需要 用 户 自 定义 类 中 的 字段 要 
与 数据 表 中 的 字段 相对 应 )。BeanPropertyRowMapper 对 象 创建 后 ， 在 findUserById0) 方 法 中 
通过 queryForObject0 方 法 返回 一 个 Object 类 型 的 单行 记录 ， 而 在 findAllUser0 方 法 中 通过 


图 < 有 
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query() 方 法 返回 一 个 结果 集合 。 
(4) 在 TestJdbcTemplate 测试 类 中 , 添加 一 个 测试 方法 fndUserByIdTest0 来 测试 相应 的 
条 件 查询 ， 代 码 如 下 : 


Public void findUserByIdTest() { 
// 初始 化 spring 容器 ， 加 载 applicationcontext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 通过 容器 ， 获 取 UserDao 的 实例 
UserDAO userDAO = (UserDRO) ctx.getBean ("userDRO") 7 
// 执行 findUserById() 方 法 ， 获 取 User 对 象 
User user=userDAO.findUserById(1); 
System.out.println (user); 


} 


在 以 上 代码 中 ,通过 执行 findUserById0 方 法 获取 了 id 为 1 的 对 象 信息 ， 并 通过 输出 语 
旬 输 出。 使 用 JUnit4 测试 运行 后 ， 控 制 台 输出 结果 如 图 5-14 所 示 。 


而 problems @ Javadoc 加 Declaration SConsole 3 duJUnit 二 


本 其 党 | 芭 朋 转 天 吕 日 " 口 
<terminated> TesUdbcTemplate.findUserByldTest UUnit] FAProgram FilesVavaVre-9.0.4\binVavawexe (201{ 
65 月 27，2818 2:64:36 下 午 org.springframework.jdbc.datasource.DriverManagerDat 人 ^ 
信息 : Loaded JDBC driver: com.mysql.jdbc.Driver 
Wed Jun 27 14:64:36 CST 2918 WARN: Establishing SSL connection without serve| 
User 对 象 : 1 -- yzpc -- yzpc 


5-14 ”查询 单个 用 户 的 运行 结果 


(5) 接 下 来 测试 查询 所 有 用 户 信 息 的 方法 。 在 TestJdbcTemplate 测试 类 中 ， 添 加 一 个 测 
试 方法 findAllUserTest0 来 查询 所 有 用 户 ， 代 码 如 下 : 


@Test 
public void findAllUserTest() { 
// 初始 化 spring 容器 ， 加 载 applicationContext .xml 配置 
ApplicationContext ctx = new 
ClassPathxmlApplicationContext ("applicationContext .xml"); 
// 通过 容器 ， 获 取 UserDao 的 实例 
UserDAO userDRO = (UserDAO)ctx.getBean ("userDAO"); 
// 执行 findAllUser () 方 法 ， 获 取 User 对 象 的 集合 
List<User> users = userDAO.findAllUser(); 
// 循环 输出 集合 中 对 象 
for (User user : users) { 
System.out.println (user); 
} 


在 上 述 代 码 中 ， 调 用 UserDAO 对 象 的 fmndAllUser() 方 法 查询 所 有 用 户 信息 集合 ， 并 通 


过 for 循环 查询 结果 。 使 用 JUnit4 成 功 运行 findAllUserTest0 方 法 后 ， 控 制 台 的 显示 信息 如 
5-15 所 示 。 
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[3 problems @ Javadoc [@ Declaration 加 Console ?3 doJUnit a 


CR 
<terminated> TestJdbcTemplate.findAllUserTest JUnit] F\VProgram FilesYava\re-9.0.4\binYy 
Wed Jun 27 14:18:38 CST 2818 WARN: Establishing SSL connection WA 
User 对 象 : 1 -- yzpc -- yzpc 
User 对 象 : 2 -- zhangsan -- 123456 
User 对 象 : 3 -- lisi -- 123 
User 对 象 : 4 -- wangwu -- 1234 


图 5-15 查询 所 有 用 户 运行 结果 
.3 小 结 


本 章 对 Spring 框架 中 使 用 Spring JDBC 数据 操作 进行 了 详细 讲解 。 首 先 讲 解 了 Spring 
JDBC 中 的 核心 类 以 及 如 何在 Spring 中 配置 Spring JDBC, 然后 通过 案例 讲解 了 Spring JDBC 
核心 类 JdbcTemplate 中 常用 方法 的 使 用 。 通 过 本 章 的 学 习 ， 读 者 能 够 学 会 如 何 使 用 Spring 
框架 进行 数据 库 开 发 ， 并 能 深切 地 体会 到 Spring 框架 的 强大 功能 。 


第 6 章 Spring MVC 简介 


对 Web 应 用 来 说 ， 表 示 层 是 不 可 或 缺 的 重要 环节 。 传 统 的 Struts 2 框架 就 是 一 个 优秀 
的 Web 框架 。 除 了 Struts 2 框架 外 ，Spring 框架 也 为 表示 层 提 供 了 一 个 优秀 的 Web 框架 ， 
即 Spring MVC。 由 于 Spring MVC 采用 了 松 耦 合 可 插 拔 组 件 结构 ， 因 此 比 其 他 MVC 框架 
具有 更 大 的 扩展 性 和 灵活 性 。 通 过 注解 ，Spring MVC 使 得 POJO 成 为 处 理 用 户 请 求 的 控制 
器 ， 无 需 实现 任何 接口 。 


6.1 ”MVC 模式 概述 


Java Web 应 用 的 结构 经 历 了 ModelI 和 ModelII 两 个 时 代 ， 从 ModelI 发 展 到 Model II 
是 技术 发 展 的 必然 。 


6.1.1 Model1 和 Modelll 


在 早期 的 Java Web 应 用 开发 中 ，JsP 
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的 ModelI 模式 如 图 6-2 所 示 。 
请 求 | aa 要 
CR Po Hr 1 1 be | 
客户 端 区 到 < 


6-2 ”改进 的 Model | 模式 


Model II 模式 基于 MVC 架构 的 设计 模式 。 在 Model I 模式 下 ， 利 用 JSP 页 面 、Servlet 
和 JavaBean 组 件 分 工 协作 共同 完成 系统 功能 的 所 有 任务 。 其 中 ，JSP 负责 数据 显示 逻辑 任 
务 ，Servlet 负责 程序 流程 控制 逻辑 任务 ，JavaBean 负责 处 理 业务 逻辑 任务 。Model II 模式 
如 图 6-3 所 示 。 


客户 端 


图 6-3 Model 1 模式 


引入 MVC 模式 , 使 得 Model I 模式 具有 组 件 化 的 特点 ， 从 而 更 有 利于 大 规模 应 用 的 开 
发 ， 但 也 增加 了 应 用 开发 的 复杂 程度 。MVC 设计 模式 简单 地 说 ， 就 是 将 数据 显示 、 流 程控 
制 和 业务 逻辑 处 理 分 离 ， 使 之 相互 独立 。 


6.1.2 MVC 模式 及 其 优势 


MVC 思想 不 是 哪个 语言 所 特有 的 设计 思想 ， 也 并 不 是 Web 应 用 所 特有 的 思想 ， 而 是 
一 种 规范 。MVC 思想 将 一 个 应 用 分 成 三 个 基本 部 分 : Model( 模 型 )、View( 视 图 ) 和 
Controller( 控 制 器 )， 这 三 个 部 分 以 最 少 的 耦合 协同 工作 ， 从 而 提高 了 应 用 的 可 扩展 性 和 可 维 
护 性 。MVC 设计 模式 中 模型 、 视 图 和 控制 器 三 者 之 间 的 关系 如 图 6-4 所 示 。 

概括 起 来 ，MVC 模式 具有 如 下 特点 。 

(1) 各 司 其 职 ， 互 不 干涉 。 在 MVC 模式 中 ，3 层 各 司 其 职 ， 所 以 如 果 哪 一 层 的 需求 发 
生 了 变化 ， 就 只 需要 更 改 相 应 层 中 的 代码 ， 而 不 会 影响 其 他 层 。 

(2) 有 利于 开发 中 的 分 工 。 在 MVC 模式 中 ， 由 于 按 层 把 系统 分 开 ， 因 此 能 更 好 地 实现 
开发 中 的 分 工 。 网 页 设计 人 员 可 以 开发 JSP 页 面 ， 对 业务 熟悉 的 开发 人 员 可 以 开发 模型 中 
相关 业务 处 理 的 方法 ， 而 其 他 开发 人 员 可 开发 控制 器 ， 以 进行 程序 控制 。 
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控制 器 (Controller) 应 用 程序 


于 定义 应 用 系统 行为 
接收 并 验证 HITP 请 求 的 数据 
将 用 户 请 求 映射 到 模型 更 新 

选择 用 于 响应 的 视图 


模型 (Model) 
描绘 解析 模型 的 数据 查询 应 用 程序 状态 封装 应 用 程序 的 状态 
闪 模 型 请 求 更 新 | 响应 对 状态 的 查询 
将 用 户 请 求 送 至 控制 器 通知 视图 更 新 数据 体现 应 用 程序 的 功能 
允许 控制 器 选择 视图 将 状态 变化 通知 视图 


图 例 说 明 
一 表示 方法 调用 
-二 表示 事件 


6-4 ”MVC 模式 各 层 的 关系 


(3) 有 利于 组 件 的 重用 。 分 层 后 更 有 利于 组 件 的 重用 ， 如 控制 层 可 独立 成 一 个 通用 的 组 
件 ， 视 图 层 也 可 做 成 通用 的 操作 界面 。MVC 最 重要 的 特点 就 是 把 显示 和 数据 分 离 ， 这 样 就 
增加 了 各 个 模块 的 可 重用 性 。 


6.2 Spring MVC 概述 


Spring MVC 是 Spring 框架 中 用 于 Web 应 用 开发 的 一 个 模块 ， 是 Spring 提供 的 一 个 基 
于 MVC 设计 模式 的 轻 量 级 Web 框架 。Spring 框架 提供 了 构建 Web 应 用 程序 的 全 功能 MVC 
模块 。Spring MVC 框架 本 质 上 相当 于 Servlet， 提 供 了 一 个 DispatcherServlet 作为 前 端 控制 
器 来 分 派 请 求 ， 同 时 提供 灵活 的 配置 处 理 程序 映射 、 视 图 解析 、 语 言 环境 和 主题 解析 ， 并 
支持 文件 上 传 。 

在 MVC 设计 模式 中 ，Spring MVC 作为 控制 器 (Controller) 来 建立 模型 与 视图 的 数据 交 
互 ， 是 一 个 典型 的 MVC 框架 ， 是 结构 最 清晰 的 MVC Model 实现， 如 图 6-5 所 示 。 
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6-5 Spring MVC-Model ll 实现 


在 Spring MVC 框架 中 , Controller 替代 Servlet 担负 控制 器 的 职能 , Controller 接收 请 求 ， 
调用 相应 的 Model 进行 处 理 ， 处 理 器 完成 业务 处 理 后 返回 处 理 结果 。Controller 调用 相应 的 
View 并 对 处 理 结果 进行 视图 演 染 ， 最 终 传送 响应 消息 到 客户 端 。 由 于 Spring MVC 的 结构 
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较为 复杂 ， 上 述 只 是 对 其 框架 结构 的 一 个 简单 描述 。 

Spring MVC 分 离 了 控制 器 、 模 型 对 象 、 分 派 器 以 及 处 理 程序 对 象 的 角色 ， 这 种 分 离 让 
它们 更 容易 进行 定制 。Spring MVC 框架 无 论 是 在 框架 设计 还 是 扩展 性 、 灵 活性 等 方面 都 全 
面 超越 了 Struts 2 等 MVC 框架 , 而 且 它 本 身 就 是 Spring 框架 的 一 部 分 ,与 Spring 框架 的 整 
合 可 以 说 是 无 颖 集成 ， 性 能 方面 具有 天 生 的 优越 性 。Spring MVC 具有 如 下 特点 。 

@ Spring MVC 拥有 强大 的 灵活 性 、 非 侵入 性 和 可 配置 性 。 

e@ Spring MVC 提供 了 一 个 前 端 控制 器 DispatcherServlet， 开 发 者 无 须 额外 开发 控制 器 

对 象 。 

@ ”Spring MVC 分 工 明确 ， 包 括 控制 器 、 验 证 器 、 命 令 对 象 、 模 型 对 象 、 处 理 器 映射 

器 、 视 图 解析 器 等 ， 每 一 个 功能 实现 由 一 个 专门 的 对 象 负责 。 

Spring MVC 可 以 自动 绑 定 用 户 输入 ， 并 正确 地 转换 数据 类 型 。 

Spring MVC 使 用 一 个 名 称 / 值 的 Map 对 象 实现 更 加 灵活 的 模型 数据 类 型 。 

@ Spring MVC 内 置 了 常见 的 校 验 器 ， 可 以 检验 用 户 输入 ， 如 果 校 验 不 同 ， 则 重 定向 

回 输 入 表单 。 输 入 校 验 是 可 选 的 ， 并 且 支 持 编程 方式 及 声明 方式 。 

@ Spring MVC 支持 国际 化 ， 支 持 根据 用 户 区 域 显 示 多 国语 言 ， 并 且 国际 化 的 配置 非 


常 简 单 。 

@ Spring MVC 支持 多 种 视图 技术 , 最 常见 的 有 JSP 技术 以 及 其 他 技术 , 包括 Velocity 
和 FreeMarker。 

e@ Spring MVC 提供 了 一 个 简单 而 强大 的 JSP 标签 库 ， 支 持 数据 绑 定 功能 ， 使 得 编写 
JSP 页 面 更 加 容易 。 


6.3 Spring MVC 环境 搭建 


Spring MVC 框架 所 需 的 jar 文件 包含 在 Spring 框架 的 资源 包 中 ， 如 下 所 示 : 
@ spring-web-5.0.4.RELEASE.jar: 在 Web 应 用 开发 时 使 用 Spring 框架 所 需 的 核心 类 。 
@ spring-webmvc-5.0.4.RELEASE.jar: Spring MVC 框架 相关 的 所 有 类 ， 包 含 框架 的 
Servlet、Web MVC 框架 ， 以 及 对 控制 器 和 视图 的 支持 。 
下 面 搭建 Spring MVC 的 开发 环境 ， 建 立 一 个 简单 的 Spring MVC 程序 帮助 读者 理解 
Spring MVC 程序 的 开发 步骤 。 
国 spring-aop-5.0.4.RELEASEjar 
(1) 创建 Web 项目， 添加 所 需要 的 J 包 。 图 spring-aspects-5.0.4.RELEASEjar 
在 Eclipse 中 , 创建 一 个 名 为 “springmvc-1” 的 Web 国 spring-beans-5.0.4.RELEASEjar 
项 目 ， 在 前 面 章 节 已 经 下 载 过 spring 的 资源 文件 ”图 spring-context-504RELEASEjar 
i 国 :pring-context-support-5.0.4.RELEASEjar 
(spring-framework-5.0.4.RELEASE-distzip)， 解 压 后 的 国 spring-core-504RELEASEjar 
libs 文件 夹 中 包含 如 图 6-6 所 示 的 12 个 jar 包 ， 将 这 几 国 spring-expression-5.0.4.RELEASEjar 
个 jar 包 以 及 aopalliance-1.0.jar、 aspectjweaver-1.9.1.jar、 Wl Spring idbe OARELEASEat 
: 。 到 spring-orm-5.0.4.RELEASEjar 
commons-logging-1.2.jar 和 cglib-3.2.0jar 这 4 个 jar 包 添 各 人 
加 到 项 目 springmvc-1l 的 WebContent\WWEB-INF\lib 路 图 :pring-web-5.0.4.RELEASEjar 
径 中 。 国 :pring-webmvc-5.0.4RELEASEjar 


6-6 Spring MVC 所 依赖 的 jar 包 
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(2) 在 web.xml 文件 中 ， 配 置 Spring MVC 的 前 端 控制 器 DispatcherServlet。 
Spring MVC 是 基于 Servlet 的 框架 ，DispatcherServlet 是 整个 Spring MVC 框架 的 核心 ， 
它 负 责 接受 请 求 并 将 其 分 派 给 相应 的 处 理 器 处 理 ， 关 键 配置 代码 如 下 : 


<!-- 配置 spring MVC 的 前 端 控制 器 DispatcherServlet --> 
<servlet> 
<servlet-name>dispatcherServlet</servlet-name> 
<servlet-class>org.springframework.web.servlet.DispatcherServlet 
</servlet-class> 
<!-- 初始 化 参数 ， 配 置 spring MVc 配置 文件 的 位 置 及 名 称 --> 
<init-param> 
<param-name>contextConfigLocation</param-name> 
<param-value>classpath:springmvc.xml</param-value> 
</init-param> 
<!-- 表示 容器 在 启动 时 ， 立 即 加 载 dispatcherServlet --> 
<load-on-startup>1</1lo0ad-on-startup> 
</servlet> 
<!-- 让 spring MVC 的 前 端 控制 器 拦截 所 有 的 请 求 --> 
<servlet-mapping> 
<servlet-name>dispatcherServlet</servlet-name> 
<url-pattern>/</url-pattern> 
</servlet-mapping> 


上 述 配 置 的 目的 在 于 ， 让 Web 容器 使 用 Spring MVC 的 DispatcherServlet， 并 通过 设置 
url-pattern 为 “/”， 将 所 有 的 URL 请 求 都 映射 到 这 个 前 端 控 制 器 DispatcherServlet。 在 配置 
DispatcherServlet 的 时 候 , 通过 设置 contextConfigLocation 参数 来 指定 Spring MVC 配置 文件 
的 位 置 ， 此 处 使 用 Spring 资源 路 径 的 方式 进行 指定 。 

(3) 创建 Spring MVC 的 配置 文件 。 

在 项 目 springmve-1 的 src 目录 下 创建 Spring MVC 配置 文件 springmvc.xml， 在 该 配置 
文件 中 ， 我 们 使 用 Spring MVC 最 简单 的 配置 方式 进行 配置 ， 主 要 配置 如 下 : 


<?xml version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.0rg/2001/xMLSchema-instance" 
xmlns:aop="http://www.springframework.org/schema/aop" 
xmlns:context="http://www.springframework.org/schema/context" 
xmlns:mvc="http://www.springframework.org/schema/mvc" 
xsi:schemaLocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context.xsd 
http://www.springframework.org/schema/mvc 
http://www.springframework.org/schema/mvc/spring-mvc.xsd"> 
<!-- 配置 处 理 器 Handle， 映 射 为 "/hello" 请 求 --> 
<bean name="/hello" class="com.springmvc.controller.HelloController"/> 
<!-- 配置 视图 解析 器 , 将 控制 器 方法 返回 的 逻辑 视图 解析 为 物理 视图 --> 
<bean class="org.springframework.web.servlet.view 
-InternalResourceViewResolver"> 
</bean> 
</beans> 
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在 springmvc.xml 文件 中 ,首先 要 引入 beans、aop、context 和 mvec 命名 空间 ， 然 后 主要 
完成 配置 处 理 器 映射 和 配置 视图 解析 器 。 

@ 配置 处 理 器 映射 。 

在 前 面 的 web.xml 里 配置 了 DispatcherServlet， 并 配置 了 哪些 请 求 需要 通过 此 Servlet 
进行 处 理 ， 接 下 来 DispatcherServlet 要 将 一 个 请 求 交 给 哪个 特定 的 Controller 处 理 ? 它 需要 
咨询 一 个 名 为 HandlerMapping 的 Bean， 之 后 把 URL 请 求 指定 给 一 个 Controller 处 理 (就 像 
web.xml 文件 使 用 <servlet-mapping> 将 URL 映射 到 相应 的 Servlet 上 )。Spring 提供 了 多 种 处 
理 器 映射 (HandlerMapping) 的 支持 ， 例 如 : 

® org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping 


@ org.springframework.web.servlet.SimpleUrlHandlerMapping 
@ org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping 
@ org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMap 
ping 
可 以 根据 需求 选择 处 理 器 映射 这 里 我 们 选择 BeanNameUrlHandlerMapping, 若 没有 明 
确 声 明 任 何 处 理 器 映射 ，Spring 会 默认 使 用 BeanNameUrlHandlerMapping， 即 在 Spring 容 
器 中 查找 与 请 求 URL 同名 的 Bean, 通过 声明 HelloController 业务 控制 器 类 ,将 其 映射 到 /hello 
请 求 。 
@ 配置 视图 解析 器 。 
处 理 请 求 的 最 后 一 件 事 就 是 解析 输出 ， 该 任务 由 视图 (这 里 使 用 JSP) 实 现 ， 那 么 需要 确 
定 : 指定 的 请 求 需要 使 用 哪个 视图 进行 请 求 结果 的 解析 输出 ? DispatcherServlet 会 查找 到 一 
个 视图 解析 器 ， 将 控制 器 返回 的 逻辑 视图 名 称 转换 成 泻 染 结果 的 实际 视图 。Spring 提供 了 
多 种 视图 解析 器 ， 例 如 : 
@ org.springframework.web.servlet.view.InternalResourceViewResolver 
@ org.springframework.web.servlet.view.ContentNegotiatingViewResolver 
在 springmvc.xml 配置 文件 中 ， 并 没有 配置 处 理 器 映射 和 处 理 器 适配器 ， 当 用 户 没有 配 
置 这 两 项 时 ，Spring 会 使 用 默认 的 处 理 器 映射 和 处 理 器 适配器 处 理 请 求 。 
(4) 创建 处 理 请 求 的 控制 器 类 。 
在 项 目的 src 目录 下 创建 包 com.springmvc.controller, 在 包 中 创建 类 HelloControllerjava， 
并 实现 Controller 接口 中 的 handleRequest 方法 ， 用 来 处 理 hello 请 求 ， 代 码 如 下 : 
Package com.springmvc.controller; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import org.springframework.web.servlet.ModelAndView; 
import org.springframework.web.servlet.mvc.Controller; 
public class HelloController implements Controller{ 
QQoverride 
public ModelAndView handleRequest (HttpServletRequest reqg, 
HttpServletResponse res) throws Exception { 
System.out.println ("Hello, Spring MVC!"); // 控 制 台 输出 
ModelAndView mv=new ModelAndView(); 
mv.addobject ("msg", "这 是 第 一 个 Spring MVC 程序 !"); 
mv.setViewName ("/ch06/first.jsp"); 
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return mV7 

} 

上 述 代 码 中 ，HelloController 是 一 个 实现 Controller 接口 的 控制 器 ， 它 可 以 处 理 一 个 单 
一 的 请 求 动作 。handleRequest 是 Controller 接口 必须 实现 的 方法 ， 该 方法 必须 返回 一 个 包含 
视图 名 或 视图 名 和 模型 的 ModelAndView 对 象 ， 该 对 象 既 包 含 视图 信息 ， 也 包含 模型 数据 
信息 。 这样 Spring MVC 就 可 以 使 用 视图 对 模型 数据 进行 解析 。 本 例 返 回 的 模型 中 包含 一 个 
名 为 “msg” 的 字符 串 对 象 ， 返 回 的 视图 路 径 为 /ch06/firstjsp， 因 此 ， 请 求 将 被 转发 到 ch06 
路 径 下 的 firstjsp 页 面 。 

ModelAndView 对 象 代表 Spring MVC 中 呈现 视图 界面 时 所 使 用 的 Model( 模 型 数据 ) 和 
View( 罗 辑 视图 名 称 )。 由 于 Java 一 次 只 能 返回 一 个 对 象 ， 所 以 ModelAndView 的 作用 就 是 
封装 这 两 个 对 象 ， 一 次 返回 我 们 所 需要 的 Model 和 View。 当 然 ， 返 回 的 模型 和 视图 也 都 是 
可 选 的 ， 在 一 些 情况 下 ， 模 型 中 没有 任何 数据 ， 那 么 只 返回 视图 即 可 ， 或 者 只 返回 模型 ， 
让 Spring MVC 根据 请 求 URL 来 决定 。 后 面 章节 还 会 对 ModelAndView 对 象 进行 讲解 。 

(5) 创建 视图 页 面 。 

在 项 目的 WebContext 路 径 下 创建 ch06 文件 夹 ， 在 ch06 文件 夹 中 创建 JSP 视图 页 面 
firstjsp， 并 在 该 视图 页 面 上 通过 EL 表达 式 输出 “msg” 中 的 信息 ， 代 码 如 下 : 

<%@ page language="java" contentType="text/html; charset=UTF-8" 

pageEncoding="UTF-8"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

”http://www.w3.org/TR/htm14/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<title>Spring MVC 的 入 门 程序 </title> 

</head> 

<body> 

${msg} 

</body> 

</html> 

(6) 部 署 项 目 ， 启 动 Tomcat 测试 。 

将 项 目 springmvc-l 发 布 到 Tomcat 中 ， 并 启动 Tomcat 服务 器 ， 在 浏览 器 地 址 栏 中 访问 
http://localhost:8080/springmvc-1/hello， 其 运行 效果 如 图 6-7 所 示 。 


@ 国 httpi//localhost8080/springmve-1/hello DC 国 Spring MVCAA 门 入 床 。 x 
文件 日 ”六 各 6) ”前 看 (V) 收藏 夫 (A) 工具 中 帮助 (H) 
这 是 第 一 个 Spring MVC 程 序 ! 


6-7 第 一 个 Spring MVC 程序 


从 图 6-7 可 以 看 到 , 浏览 器 中 已 经 显示 出 了 模型 对 象 的 字符 串 信 息 , 控制 台 窗口 中 输出 
了 “这 是 第 一 个 Spring MVC 程序 !” 提 示 ， 这 也 就 说 明 第 一 个 Spring MVC 程序 执行 成 功 。 
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使 用 MVC 框架 就 应 该 遵守 MVC 思想 ，MVC 框架 不 赞成 浏览 器 直接 访问 Web 应 用 的 
视图 页 面 ， 用 户 的 所 有 请 求 都 只 应 向 控制 器 发 送 ， 由 控制 器 调用 模型 组 件 、 视 图 组 件 向 用 
户 呈 现 数据 。 


6.4 Spring MVC 请 求 流程 


通过 前 面 示例 ， 简 单 总 结 Spring MVC 的 处 理 流程 。 当 用 户 发 送 URL 请 求 
http://localhost:8080/springmvce-1/hello 时 , 根据 web.xml 中 对 DispatcherServlet 的 配置 ,该 请 
求 被 DispatcherServlet 截获 ， 并 根据 HandlerMapping 找到 处 理 相 应 请 求 的 Controller 控制 器 
(HelloController); Controller 处 理 完 成 后 ， 返 回 ModelAndView 对 象 ; 该 对 象 告诉 
DispatcherServlet 需要 通过 哪个 视图 来 进行 数据 模型 的 展示 , DispatcherServlet 根据 视图 解析 
器 把 Controller 返回 的 逻辑 视图 名 演 染 成 真正 的 视图 并 输出 ， 呈 现 给 用 户 。 

接 下 来 深入 了 解 Spring MVC 框架 的 请 求 处 理 流程 ， 如 图 6-8 所 示 。 

按照 图 6-8 可 以 知道 ，Spring MVC 的 请 求 处 理 流程 如 下 。 

(1) 用 户 通 过 客户 端 向 服务 器 发 起 一 个 request 请 求 ， 此 请 求 会 被 前 端 控制 器 
(DispatcherServlet) 所 拦截 。 

(2) 前 端 控制 器 请 求 处 理 器 映射 器 (HandlerMapping) 去 查找 Handler， 可 以 依据 XML 配 
置 或 注解 去 查找 。 

(3) 处 理 器 映射 器 根据 请 求 URL 找到 具体 的 处 理 器 ， 生 成 处 理 器 对 象 及 处 理 器 拦截 器 
(如 果 有 则 生成 )， 并 返回 给 前 端 控制 器 。 

(4) 前 端 控制 器 请 求 处 理 器 适配器 (HandlerAdapter) 去 执行 相应 的 Handler( 常 称 为 


Controller)。 


前 端 控制 器 
DispatcherServlet 


nN 接收 用 户 请 求 反 馈 响 应 


处 理 器 映射 器 
HandlerMapping 


处 理 器 适配器 
HandlerAdapter 


视图 解析 器 
ViewResolver 
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(5) 处 理 器 适配器 会 调用 并 执行 Handler 处 理 器 ， 这 里 的 处 理 器 指 的 是 程序 中 编写 的 
Controller 类 ， 也 被 称 为 后 端 控制 器 。 在 请 求 信息 到 达 真 正 调用 Handler 的 处 理 方法 之 前 的 
这 段 时 间 内 ，Spring MVC 还 完成 了 很 多 工作 。 
@ ”消息 转换 : 将 请 求 消息 (如 Json、xml 等 数据 ) 转 换 成 一 个 对 象 ， 将 对 象 转换 为 指定 
的 响应 信息 。 

@ 数据 转换 : 对 请 求 消息 进行 数据 转换 ， 如 String 转换 成 Integer、Double 等 。 

@ 数据 格式 化 : 对 请 求 消息 进行 数据 格式 化 ， 如 将 字符 串 转换 成 格式 化 数字 或 格式 
化 日 期 等 。 

@ ”数据 验证 ， 验证 数据 的 有 效 性 (长 度 、 格 式 等 )， 验 证 结果 存储 到 BindingResult 或 
Error 中 。 

(6) Controller 执行 完毕 后 会 返回 给 处 理 器 适配器 一 个 ModelAndView 对 象 (Spring MVC 
底层 对 象 )， 该 对 象 中 会 包含 View 视图 信息 或 包含 Model 数据 模型 和 View 视图 信息 。 

(7) 处 理 器 适配器 接收 到 Controller 返回 的 ModelAndView 后 , 将 其 返回 给 前 端 控制 器 。 

(8) 前 端 控制 器 接收 到 ModelAndView 后 ， 选 择 一 个 合适 的 视图 解析 器 (ViewReslover) 
对 视图 进行 解析 。 

(9) 视图 解析 器 解析 后 ， 会 根据 View 视图 信息 匹配 到 相应 的 视图 结果 ， 反 馈 给 前 端 控 
制 器 。 

(10) 前 端 控制 器 收 到 View 视图 后 ， 进 行 视图 泻 染 ， 将 模型 数据 (在 ModelAndView 对 
象 中 ) 填 充 到 request 域 。 

(11) 前 端 控制 器 向 用 户 响应 结果 。 

以 上 就 是 Spring MVC 的 整个 请 求 处 理 流程 ， 其 中 用 到 的 组 件 有 前 端 控制 器 
(DispatcherServlet)、\ 处 理 器 映射 器 (HandlerMapping)、 处 理 器 适配器 (HandlerAdapter)、Handler 
处 理 器 (Controller)、 视 图 解析 器 (ViewResolver)、 视 图 (View)。 其 中 ，DispatcherServlet、 
HandlerMapping、HandlerAdapter 和 ViewResolver 对 象 的 工作 是 在 框架 内 部 执行 的 , 开发 人 
员 并 不 需要 关心 这 些 对 象 内 部 的 实现 过 程 ， 只 需要 配置 DispatcherServlet， 完 成 Handler 处 
理 器 (Controller) 中 的 业务 处 理 ， 并 在 视图 中 展示 相应 信息 即 可 。 


6.5 小 结 


本 章 首先 对 MVC 模式 进行 了 简单 介绍 ， 然 后 介绍 了 Spring MVC 框架 。 通 过 入 门 案例 
搭建 Spring MVC 环境 ， 对 Spring MVC 的 工作 流程 进行 了 详细 讲解 。 
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上 一 章 学 习 了 Spring MVC 的 基本 开发 环境 搭建 以 及 Spring MVC 的 请 求 流程 ,在 Spring 
2.5 之 前 ， 只 能 使 用 实现 Controller 接口 的 方式 开发 控制 器 ,在 Spring 2.5 之 后 ， 新 增加 了 基 
于 注解 的 控制 器 以 及 其 他 一 些 常用 注解 。 到 目前 为 止 ，Spring 的 版 本 虽然 变化 较 大 ， 但 注 
解 的 特性 一 直 被 延续 下 来 ， 并 不 断 扩 展 ， 极 大 地 减少 了 程序 员 的 开发 工作 ， 让 广大 开发 者 
的 工作 变 得 更 为 轻松 。 本 章 将 对 Spring MVC 中 的 常用 注解 进行 讲解 。 


7.1 基于 注解 的 控制 器 


7.1.1 @Controller 注解 
对 于 上 一 章 所 讲解 的 springmve-1 示例 ， 如 果 有 多 个 请 求 ， J 区 他 
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(1) 将 项 目 springmve-1 复制 并 重 命名 为 springmvc-2， 再 导入 到 Eclipse 开发 环境 中 。 
选中 springmvc-2 项 目 并 右 击 ， 在 快捷 菜单 中 选择 Properties 命令 ， 进 入 属性 设置 界面 ， 找 
到 Web Project Settings 选项 , 将 右 侧 Context root 文本 框 中 的 springmvc-l 改 为 springmvc-2， 
单 击 Apply and Close 按钮 ， 如 图 7-1 所 示 。 


Properties for springmvc-2 口 x 


type fiter text Web Project Settings A 
Web Content Settings ^ 
Web page Editor 


Context root |springmve-d 


Web Project Settings 

WikiText 

XDoclet 
有 js Restore Defaults Apply 
@ E 


7-1 修改 项 目 发 布 路 径 
(2) 修改 springmvc.xml 的 配置 文件 ， 关 键 代码 如 下 : 


<?xml] Version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 


xsi:schemaLocation="http://www.springframework.org/schema/beans 
ee http://www.springframework.org/schema/mvc/spring-mvc.xsd"> 
<!-- 配置 自动 扫描 的 包 --> 
<context:component-scan base-package="com.springmvc"/> 
<mvc:annotation-driven/> 
<!-- 配置 视图 解析 器 ， 将 控制 器 方法 返回 的 逻辑 视图 解析 为 物理 视图 --> 
<bean class="org.springframework.web.servlet.view 
.InternalResourceViewResolver"> 
<property name="prefix" value="/ch06/"></property> 
<property name="suffix" value=".jsp"></property> 
</bean> 
</beans> 


删除 了 <bean name="/hello" class="com.springmvc.controller.HelloController"/>, 增加 了 两 
个 标签 。 

@ ”<mvc:annotation-driven/>: 配置 该 标签 会 自动 注册 DefaultAnnotationHandlerMapping 
(处 理 器 映射 器 ) 与 AnnotationMethodHandlerAdapter( 处 理 器 适配器 ) 两 个 Bean。 
Spring MVC 需要 通过 这 两 个 Bean 实例 来 完成 对 @Controller 和 @RequestMapping 
等 注解 的 支持 ， 从 而 找 出 URL 与 handler method 的 关系 并 予以 关联 。 换 言 之 ， 完 
成 在 Spring 容器 中 这 两 个 Bean 的 注册 是 Spring MVC 为 @Controller 分 发 请 求 的 必 
要 支持 。 

@ <context:component-scan …/>: 该 标签 是 对 包 进行 扫描 ， 实 现 注解 驱动 Bean 的 定 
义 , 同时 将 Bean 自动 注入 容器 中 使 用 , 即 标注 了 Spring MVC 注解 (如 @Controller) 
的 Bean 生效 。 换 句 话说 ， 若 没有 配置 此 标签 ， 那 么 标注 @Controller 的 Bean 仅仅 
是 一 个 普通 的 JavaBean， 而 不 是 一 个 可 以 处 理 请 求 的 控制 器 。 
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这 里 还 是 使 用 IntermalResourceViewResolver 定义 该 视图 解析 器 ， 通 过 配置 prefix( 前 级 ) 
和 suffix( 后 缀 )， 将 控制 器 方法 返回 的 逻辑 视图 名 演 染 为 物理 视图 。 
(3) 修改 HelloControllerjava， 代 码 如 下 : 


Package com.springmvc.controller; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.servlet.ModelAndView; 
/* 六 
* HelloController 是 一 个 基于 注解 的 控制 器 ， 可 同时 处 理 多 个 请 求 ， 并 无 须 实现 任何 接口 ， 
* org.springframework.stereotype.Controller 注解 用 于 指示 该 类 是 一 个 控制 器 
QController 
public class HellocControllerst 
/** 
* Org.springframework.web.bind.annotation.RequestMapping 注解 
* 用 来 映射 请 求 的 URL 和 请 求 的 方法 等 。 本 例 用 来 映射 "/hello" 
* hello() 是 普通 方法 ， 返 回 一 包含 视图 名 或 视图 名 和 模型 的 ModelandView 
*/ @RequestMapping (value="/hello") 
public ModelAndView hello() { 
System.out.println (MHellorannotationN Sperinag Mey) ; 
// 创 建 ModelandView 对 象 ， 该 对 象 包含 返回 视图 名 、 模 型 名 称 以 及 模型 对 象 
ModelAndView mv=new ModelAndView(); 
// 添 加 模型 数据 ， 可 以 是 任何 PoJO 对 象 
mv.addobject ("msg", "这 是 基于 注解 的 spring MYG 程序 和 ") ; 
// 设 置 逻 辑 视图 名 ， 视 图 解析 器 会 根据 该 名 字 解 析 到 具体 的 视图 页 面 
mv.setViewName ("first"); 
// 返 回 ModelandView 对 象 


return mv; 


} 


上 述 代码 中 , 使 用 @Controller 对 HelloController 类 进行 标注 , 使 其 成 为 一 个 可 处 理 http 
请 求 的 控制 器 ; 使 用 @RequestMapping 映射 一 个 请 求 和 请 求 的 方法 , 对 HelloController 类 中 
的 hello0 方 法 进行 标注 ， 确 定 hello0 对 应 的 请 求 URL。 如 果 还 有 其 他 的 业务 URL 请 求 ， 只 
需 在 该 类 下 添加 方法 即 可 ， 当 然 方法 要 用 @RequestMapping 标注 ， 确 定 方法 对 应 的 请 求 
URL。 
(4) 部 署 运 行 。 
在 地 址 栏 输入 请 求 http://localhost:8080/springmvc-2/hello 后 ， 运 行 结果 如 图 7-2 所 示 。 
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图 7-2 基于 注解 的 控制 器 实现 


与 实现 Controller 接口 的 方式 相 比 ， 使 用 注解 的 方式 显得 更 加 简单 。 同 时 Controller 实 
现 类 只 能 处 理 单一 的 请 求 动作 ， 而 基于 注解 的 控制 器 可 以 同时 处 理 多 个 请 求 动作 ， 这 样 就 
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解决 了 之 前 在 配置 文件 中 创建 多 个 Bean 的 问题 ， 而 无 需 再 多 建 JavaBean 作为 Controller 去 
满足 业务 需求 。 因 此 在 实际 开发 中 通常 都 会 使 用 基于 注解 的 形式 。 


7.1.2 @RequestMapping 注解 


Spring 通过 @Controller 注解 找到 相应 的 控制 器 类 以 后 ， 还 需要 知道 控制 器 内 部 对 每 一 
个 请 求 是 如 何 处 理 的 ， 这 就 需要 org.springframework.web.bind.annotation.RequestMapping 注 
解 类 型 (在 上 面 小 节 已 有 讲解 )。@RequestMapping 注解 的 作用 是 为 控制 器 指定 可 以 处 理 哪 些 
URL 请 求 ， 可 以 使 用 该 注解 标注 在 一 个 方法 或 一 个 类 上 。 标 注 在 类 上 时 ， 该 类 的 所 有 方法 
都 将 映射 为 相对 于 类 级 别 的 请 求 ， 标 注 在 方法 上 时 ， 该 方法 将 成 为 一 个 请 求 处 理 方法 ， 它 
会 在 程序 接收 到 对 应 的 URL 请 求 时 被 调用 。 示 例 代码 如 下 : 


Package com.springmvc.controller; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
@Controller 
@RequestMapping (value="/user") 
public class UserController { 

@RequestMapping (value="/register" 

Public String register() { 

return "register"; 


人 
public String login() { 
return "login"; 
3 
} 
由 于 UserController 类 中 添加 了 value="/user" 的 @RequestMapping 注解 ， 因 此 所 有 相关 
路 径 都 要 加 上 "user"， 此 方法 被 映射 到 如 下 请 求 URL: 
http://localhost:8080/springmvce-2/user/register 
http://localhost:8080/springmve-2/user/login 
@RequestMapping 注解 除了 可 以 指定 value 属性 外 ， 还 可 指定 其 他 一 些 属性 ， 所 有 属性 
都 是 可 选 的 ， 具 体 如 下 。 
@ value 属性 
该 属性 是 @RequestMapping 注解 的 默认 属性 ， 因 此 如 果 有 唯一 的 属性 ， 则 可 以 省 略 属 
性 名 ， 用 来 映射 一 个 请 求 和 一 种 方法 。 可 以 使 用 @RequestMapping 注释 一 个 类 或 方法 。 
@RequestMapping("/hello") 和 (@RequestMapping(value="/hello") 标 注 含义 相同 。 
但 如 果 超 过 一 个 属性 ， 就 必须 写 上 value 属性 。 
@ method 属性 
该 属性 用 来 指示 方法 仅仅 处 理 哪些 http 请 求 方式 ， 可 支持 一 个 或 多 个 请 求 方式 。 
@RequestMapping("/hello",method=RequestMethod.POST) 表 示 只 支持 POST 请 求 方式 。 
@RequestMapping("hello".method= {RequestMethod.POST.RequestMethod.GET}) 表 示 支 
持 POST 和 GET 请 求 方式 。 
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如 果 没 有 指定 method 属性 ， 则 请 求 处 理 方法 可 以 处 理 任意 请 求 处 理 方式 。 

@ params 属性 

该 属性 指定 request 中 必须 包含 某 些 参 数值 时 ， 才 让 方法 处 理 。 例 如 ， 

人 @RequestMapping(value='"/hello".method=RequestMethod.POST.params="myParam=myV 
alue") 表 示 方 法 仅 处 理 名 为 myParam、 值 为 myValue 的 请 求 。 

@ headers 属性 

该 属性 指定 request 中 必须 包含 某 些 指定 的 header 值 ， 才 能 让 方法 请 求 处 理 。 例 如 ， 

(@RequestMapping(value="/hello",method=RequestMethod.POST,headers={"content-type=t 
ext/*","Referer=http://www.yzu.edu.cn/"}) 表 示 方 法 将 处 理 request 的 header 中 具有 text/html、 
text/plain 等 内 容 ， 并 且 包 含 指定 Referer 请 求 头 和 对 应 值 为 http://www.yzu.edu.cn 的 请 求 。 

@ consumes 属性 

该 属性 指定 处 理 请 求 的 提交 内 容 类 型 (Context-Type)。@RequestMapping(value="/hello", 
method=RequestMethod.POST,consumes="applicationm/json") 表 示 方 法 仅 处 理 request Context-Type 
为 application/json 类 型 的 请 求 。 

@ ”produces 属性 

该 属性 指定 返回 的 内 容 类 型 ， 返 回 的 内 容 类 型 必须 是 request 请 求 头 中 所 包含 的 类 型 。 
@RequestMapping(value="/hello",method=RequestMethod.POST,produces="application/json") 
表示 方法 仅 处 理 request 请 求 头 中 包含 application/json 类 型 的 请 求 ， 同 时 指明 了 返回 的 内 容 
类 型 为 application/json。 


7.2 请求 映 射 方式 


在 spring MVC 的 控制 器 中 ， 我 们 经 常 使 用 @RequestMapping 来 完成 请 求 映 射 ， 我 们 可 
以 在 类 定义 上 和 方法 定义 上 使 用 注解 ， 其 配置 的 路 径 将 为 类 中 定义 的 所 有 方法 的 父 路 径 。 
Spring MVC 可 以 根据 请 求 方式 、Ant 风格 的 URL 路 径 和 REST 风格 的 URL 路 径 进行 映射 。 


7.2.1 根据 请 求 方式 进行 映射 


@RequestMapping 注解 除了 可 以 根据 请 求 的 URL 进行 映射 外 ， 还 可 以 根据 请 求 方式 进 
行 映 射 。 如 果 想 根据 请 求 方式 进行 映射 ， 可 通过 设置 method 属性 来 实现 。 

(1) 在 springmvc-2 的 项 目下 ， 新 建 UserController 类 ， 使 用 @Controller 注解 ， 并 在 类 
中 添加 方法 requestMethod0， 使 用 @RequestMapping 注解 的 method 属性 指定 该 方法 的 请 求 
方式 为 POST， 代 码 如 下 。 

Package com.springmvc.controller; 

import org.springframework.stereotype.Controller; 

import org.springframework.web.bind.annotation.RequestMapping; 

import org.springframework.web.bind.annotation.RequestMethod; 

@Controller 

@RequestMapping (value="/user") 

public class UserController { 


@< EE 
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@RequestMapping (value = "/requestMethod", method = RequestMethod.POST) 
public String requestMethod() { 


return "success"; 
# 
} 


(2) 在 WebContent 的 路 径 下 新 建 一 个 “ch07” 文 件 夹 ， 并 在 该 文件 夹 中 新 建 indexjsp 
页 面 ， 在 页 面 中 添加 一 个 Request Method 超 链 接 ， 超 链接 的 代码 如 下 : 


<a href="../user/requestMethod">GET Request Method</a> 


在 ch07 文件 夹 中 ， 新 建 一 个 successjsp 页 面 ， 在 页 面 中 给 出 提示 信息 “欢迎 来 学 习 
Spring MVC! ”。 


(3) 修改 springmvc.xml 配置 文件 , 将 视图 解析 器 中 的 prefix( 前 级 )“ch06” 改 为 “ch07”， 
代码 如 下 : 


<bean class="org.springframework.web.servlet .view. 
InternalResourceViewResolver"> 


<property name="prefix" value="/ch07/"></property> 


<property name="suffix" value=".jsp"></property> 
</bean> 


(4) 重启 Tomcat， 浏 览 页 面 index.jsp， 单 击 GET Request Method 超 链接 ， 浏 览 器 会 显 
示 错 误 信息 “HTTP Status 405 - Request method 'GET' not supported”， 如 图 7-3 所 示 。 
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7-3 ”请 求 处 理 提示 错误 


错误 原因 在 于 : requestMethod 方法 被 设置 为 处 理 POST 方式 的 请 求 ， 而 通过 超 链接 发 
出 请 求 的 方式 为 GET 方式 。 
(5) 在 index.jsp 页 面 中 添加 一 个 表单 ， 通 过 表单 提交 请 求 ， 代 码 如 下 : 


<form action="../user/requestMethod" method="post"> 


<input type="submit" value="POST Request Method"> 
</form> 


浏览 页 面 index.jsp， 单 击 POST Request Method 按钮 提交 请 求 ， 页 面 成 功 转发 到 


success.jsp。 


7.2.2 Ant 风格 的 URL 路 径 映射 


Ant 风格 的 URL 支持“? ”“*” 和 “**” 三 种 匹配 符 ， 


“? ”符号 匹配 文件 名 中 的 一 
个 字符 ，“*” 符 号 匹配 文件 名 中 的 任意 字符 ， 


“**” 符 号 匹配 多 层 路 径 。 
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下 面 以 “*” 符 号 为 例 演示 Ant 风格 的 URL 路 径 映 射 。 在 UserController 类 中 添加 方法 
pathAnt()， 代 码 如 下 : 
@RequestMapping ("/*/pathAnt") 
public String pathAnt (){ 
System.out.println("Path Ant"); 
return "success"; 


} 
在 index.jsp 页 面 中 添加 一 个 Path Ant 超 链 接 ， 代 码 如 下 : 


<a href="../user/my/pathAnt">Path Ant</a><br><br> 


重启 Tomcat， 浏览 页 面 index.jsp， 单 击 Path Ant 链接 ， 页 面 成 功 转发 到 success.jsp， 并 
且 在 控制 台 输 出 “Path Ant”。 


7.2.3 REST 风格 的 URL 路 径 映射 


REST 是 Representational State Transfer 的 缩写 , 意思 是 表现 层 状态 转化 , 是 当前 流行 的 
一 种 互联 网 软件 架构 ， 采 用 REST 风格 可 以 有 效 降低 开发 的 复杂 性 ， 提 高 系统 的 可 伸缩 性 。 

在 Web 开发 中 ，REST 使 用 HTTP 协议 连接 器 来 标识 对 资源 的 操作 (获取 /查询 、 创 建 、 
删除 、 修 改 )， 用 HTTP Method( 请 求 方法 ) 标 识 操 作 类 型 ，HTTP GET 标识 获取 和 查询 资源 ， 
HTTP POST 标识 创建 资源 ，HTTP PUT 标识 修改 资源 ，HTTP DELETE 标识 删除 资源 。 

这 样 ，URI 加 上 HTTP Method 构成 了 REST 风格 数据 处 理 的 核心 ，URI 确定 操作 的 对 
象 ，HTTP Method 确定 操作 的 方式 。 例 如 ，“/User/1 HTTP GET” 表 示 获 取 id 为 1 的 User 
对 象 ，“/User/1 HTTP DELETE” 表 示 删 除 id 为 1 的 User 对 象 ，“/User/1 HTTP PUT” 表 
示 更 新 id 为 1 的 User 对 象 ，“/User HTTP POST” 表 示 新 增 User 对 象 。 

由 于 form 表单 只 支持 GET 和 了 POST 请 求 ， 而 不 支持 DELETE 和 了 PUT 等 请 求 方式 ，Spring 
提供 了 一 个 过 滤器 HiddenHttpMethodFilter， 可 以 将 DELETE 和 PUT 请 求 转 换 为 标准 的 
HTTP 方式 ， 即 能 将 POST 请 求 转 为 DELETE 或 PUT 请 求 。 

下 面 通过 一 个 简单 的 示例 演示 REST 风格 的 URL 路 径 映 射 ， 实 现 过 程 如 下 : 

(1) 在 web.xml 文件 中 配置 过 滤器 HiddenHttpMethodFilter， 如 下 所 示 : 

<!-- 配置 HiddenHttpMethodFilter， 可 将 POST 请 求 转 为 DELETE 或 PUT 请 求 --> 

<filter> 

<filter-name>HiddenHttpMethodFilter</filter-name> 
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter 
</filter-class> 

</filter> 

<filter-mapping> 

<filter-name>HiddenHttpMethodFilter</filter-name> 
<url-pattern>/*</url-pattern> 


</filter-mapping> 


(2) 处 理 GET 请 求 。 
Q@ 在 index.jsp 页 面 中 添加 Rest GET 超 链接 ， 如 下 所 示 : 
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<a href="../user/rest/1">Rest GET</a> 
@ 在 UserController 类 中 添加 方法 restGET， 处 理 GET 方式 请 求 ， 如 下 所 示 : 
@RequestMapping (value = "/rest/{id}", method = RequestMethod.GET) 


public String restGET (@PathVariable("id") Integer id) { 
System.out.println("Rest GET:" + id); 
return "success"; 


} 


重启 Tomcat， 浏 览 index.jsp 页 面 ， 单 击 Rest GET 链接 ， 页 面 成 功 转发 到 success.jsp， 
控制 台 输 出 如 下 所 示 : 


Rest GET:1 


(3) 处 理 POST 请 求 。 
Q@ 在 indexjsp 页 面 中 添加 一 个 表单 ， 代 码 如 下 : 


<form action="../user/rest" method="post"> 
<input type="submit" value="Rest POST"> 
</form> 


@ 在 UserController 类 中 添加 方法 restPOST， 处 理 POST 方式 请 求 ， 如 下 所 示 : 


@RequestMapping (value = "/rest", method = RequestMethod.POST) 
public String restPOST() { 

System.out.println("Rest POST"); 

return "success"; 


} 


重启 Tomcat， 浏 览 index.jsp 页 面 ， 单 击 Rest POST 按钮 ， 页 面 成 功 转发 到 success.jsp， 
控制 台 输出 如 下 所 示 : 


Rest POST 


(4) 处 理 DELETE 请 求 。 
@ 在 index.jsp 页 面 中 添加 一 个 表单 ， 如 下 所 示 : 
<form action="../user/rest/1" method="post"> 
<input type="hidden" name=" method" value="DELETE"> 


<input type="submit" value="Rest DELETE"> 
</form> 


表单 中 使 用 了 一 个 名 称 为 “_method” 的 隐藏 域 ， 并 给 其 赋值 DELETE 。 过 滤器 
HiddenHttpMethodFilter 正 是 通过 “ method” 的 值 ， 将 POST 请 求 转 为 DELETE 。 
@ 在 UserController 类 中 添加 方法 restDELETE， 处 理 DELETE 方式 请 求 ， 如 下 所 示 : 


@RequestMapping (value="/rest/{id}",method=RequestMethod.DELETE) 
public String restDELETE (GPathVariable("id") Integer id) { 
System.out.println("Rest DELETE:" + id); 
return "redirect:/user/doTransfer"; 


二 
restDELETE 方法 返回 值 使 用 了 重 定向 ,将 请 求 重 定 向 到 “user/doTransfer”， 该 映射 对 
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应 的 处 理 方法 如 下 所 示 : 


@RequestMapping ("/doTransfer") 
public String doTransfer() { 


return "success"; 
} 
重启 Tomcat, 浏览 index.jsp 页 面 , 单 击 Rest DELETE 按钮 , 页 面 成 功 转发 到 success.jsp， 
控制 台 输出 如 下 所 示 : 


Rest DELETE:1 


从 控制 台 输 出 结果 可 以 看 出 ， 单 击 Rest DELETE 按钮 发 出 的 请 求 被 成 功 提交 给 
UserController 类 中 的 restDELETE 方法 来 处 理 。 

(5) 处 理 PUT 请 求 。 

@ 在 index.jsp 页 面 中 添加 一 个 表单 ， 如 下 所 示 : 


<form action="../user/rest/1" method="post"> 
<input type="hidden" name=" method" value="PUT"> 
<input type="submit" value="Rest PUT"> 

</form> 


表单 中 使 用 了 一 个 名 称 为 “_method ”的 隐藏 域 ， 并 给 其 赋值 PUT。 过 滤器 
HiddenHttpMethodFilter 正 是 通过 “_method” 的 值 ， 将 POST 请 求 转 为 PUT。 
@ 在 HelloController 类 中 添加 方法 restPUT， 处 理 PUT 方式 请 求 ， 如 下 所 示 : 


@RequestMapping (value = "/rest/{id}", method = RequestMethod.PUT) 
Public String restPUT(@PathVariable("id") Integer id) { 
System.out.println("Rest PUT:" + id); 
return "redirect:/user/doTransfer"; 


重启 Tomcat， 浏 览 index.jsp 页 面 ， 单 击 Rest PUT 按钮 ， 页 面 成 功 转发 到 success.jsp， 
控制 台 输 出 如 下 所 示 : 


Rest PUT:1 


从 控制 台 输 出 结果 可 以 看 出 ， 单 击 Rest PUT 按钮 发 出 的 请 求 被 成 功 提交 给 
UserController 类 中 的 restPUT 方法 来 处 理 。 


7.3” 绑 定 控制 器 类 处 理 方法 入 参 


我 们 知道 ， 当 用 户 在 页 面 触发 某 种 请 求 时 ， 一 般 会 将 一 些 参数 (key/value) 带 到 后 台 。 在 
Spring MVC 中 可 以 通过 参数 绑 定 ， 将 客户 端 请 求 的 key/value 数据 绑 定 到 Controller 处 理 方 
法 的 形 参 上 。Spring MVC 支持 将 多 种 途径 传递 的 参数 绑 定 到 控制 器 类 的 处 理 方法 的 输入 参 
数 中 。 


1. 映射 URL 绑 定 的 占 位 符 到 方法 入 参 
使 用 @PathVariable 注解 可 以 将 URL 中 的 占 位 符 绑 定 到 控制 器 方法 的 入 参 中 。 在 
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UserController 类 中 添加 pathVariable0 方 法 ， 使 用 @PathVariable 注解 映射 URL 中 的 占 位 符 
到 目标 方法 的 参数 中 ， 代 码 如 下 : 


@RequestMapping("/pathVariable/{id}") 

public String pathVariable (@PathVariable("id") Integer id) { 
System.out.println("Path Variable:" + id); 
return "success"; 


} 

在 index.jsp 页 面 中 添加 一 个 Path Variable 超 链 接 ， 代 码 如 下 : 

<a href="../user/pathVariable/1">Path Variable</a><br><br> 

URL 中 的 占 位 符 {id} 通 过 注解 @PathVariable("id") 绑 定 到 pathVariable 方 法 的 入 参 id 中 ， 
重启 Tomcat， 浏 览 页 面 index.jsp， 单 击 Path Variable 链接 ， 页 面 成 功 转发 到 success.jsp， 控 
制 台 输 出 “Path Variable:1”。 

2. 绑 定 请 求 参数 到 控制 器 方法 参数 

在 控制 器 方法 入 参 处 使 用 @RequestParam 注解 可 以 将 请 求 参数 传递 给 方法 ， 通 过 
@RequestParam 注解 的 value 属性 指定 参数 名 ,required 属性 指定 参数 是 否 必需 , 默认 为 true， 
表示 请 求 参数 中 必须 包含 对 应 的 参数 ， 如 果 不 存在 ， 则 抛 出 异常 。 

在 UserController 类 中 添加 requestParam() 方 法 , 使 用 @RequestParam 注解 绑 定 请 求 参数 
到 控制 器 方法 参数 ， 代 码 如 下 : 


@RequestMapping ("/requestParam") 

public String requestParam( 
@RequestParam(value = "loginName") String loginName, 
@RequestParam(value = "loginPwd") String loginPwd) { 
System.out.println("Request Param:" + loginName + " " + loginPwd); 
return "success"; 


} 
在 index.jsp 页 面 中 添加 一 个 Request Param 超 链 接 ， 代 码 如 下 : 


<a href="../user/requestParam?loginName=admingloginPwd=123456"> 
Request Param</a> <br><br> 


重启 Tomcat, 浏览 页 面 index.jsp, 单 击 Request Param 链接 , 页 面 成 功 转 发 到 success.jsp， 
控制 台 输出 “Request Param:admin 123456”。 


3. 将 请 求 参 数 绑 定 到 控制 器 方法 的 表单 对 象 


Spring MVC 会 按照 参数 名 和 属性 名 进行 自动 匹配 ， 自 动 为 该 对 象 填充 属性 值 ， 并 且 支 
持 级 联 。 在 项 目的 src 目录 下 创建 包 com.springmvc.entity， 在 包 中 创建 用 户 实体 类 Userjava 
和 地 址 实体 类 Address.java。 实 体 类 Address 的 代码 如 下 : 


Package com.springmvc.entity; 

Public class Address { 
Private String province; 
private String city; 


// 此 处 省 略 属性 的 getter 和 setter 方法 
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// 此 处 省 略 构造 方法 
// 重 写 tostring () 方 法 
override 
public String toString() { 
return "Address[province="+province+",city="+city+"]"; 


} 
了 


实体 类 User 的 代码 如 下 : 


Package com.springmvc.entity; 
public class User { 
Private String loginName; 
Private String loginpwd; 
Private Address address; 
// 此 处 省 略 属性 的 getter 和 setter 方法 
// 此 处 省 略 构造 方法 
// 重 写 tostring () 方 法 
override 
public String toString() { 
return "User[loginName="+loginName+",1loginPwd=" 
+loginPwd+",address="+address+"]"; 


} 
然后 在 UserController 类 中 添加 saveUser() 方 法 ， 将 请 求 参数 绑 定 到 控制 器 方法 的 表单 
对 象 User 中 。 


@RequestMapping ("/saveUser") 

public String saveUser (User user) { 
System.out.println (user); 
return "success"; 


} 
最 后 在 index.jsp 页 面 中 创建 一 个 表单 ， 代 码 如 下 : 


<form action="../user/saveUser" method="post"> 
loginName:<input type="text" name="loginName"><br> 
loginPwd:<input type="password" name="loginPwd"><br> 
province:<input type="text" name="address.province"><br> 
city:<input type="text" name="address.city"><br> 
<input type="submit" value=" 提 交 "> 

</form> 


重启 Tomcat， 浏 览 index.jsp 页 面 ， 在 表单 中 输入 用 户 名 “admin”、 密 码 “123456”、 
省 份 “JiangSu” 和 城市 “YangZhou”， 单 击 “ 提 交 ” 按 钮 ， 控 制 台 输出 如 下 所 示 : 


User[loginName=admin,1loginpPwd=123456,address=Address 


[province=JiangSu, city=YangZzhou]] 
4. 将 请 求 参数 绑 定 到 控制 器 方法 的 Map 对 象 
Spring MVC 注解 可 以 将 表单 数据 传递 到 控制 器 方法 中 的 Map 类 型 的 入 参 中 。 在 
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com.springmvce.entity 包 中 创建 UserMap 类 , 定义 Map<String, User> 类 型 的 属性 uMap， 并 为 
该 属性 提供 getter 和 setter 方法 ， 代 码 如 下 : 


Package com.springmvc.entity; 
import java.util.Map; 
public class UserMap { 
private Map<Sstring, User> uMap; 
public Map<String, User> getuMap() { 
return uMap; 
3 
public void setuMap (Map<String, User> uMap) { 
this.uMap = uMap; 


} 


在 UserController 类 中 添加 getUser() 方 法 ， 实现 将 请 求 参数 绑 定 到 控制 器 方法 的 Map 
对 象 ， 并 遍历 Map， 将 Map 中 的 内 容 输出 到 控制 台 。 


@RequestMapping ("/getUser" 
Public String getUser (UserMap uMap) { 
Set set = uMap.getuMap() .keySet (); 
Iterator iterator = set.iterator(); 
while (iterator.hasNext()) { 
Object keyName = iterator.next(); 
User u = uMap.getuMap() .get (keyName); 
System.out.println(u); 
} 
return "success"; 


} 
在 index.jsp 页 面 中 创建 一 个 表单 ， 代 码 如 下 : 


<form action="../user/getUser" method="post"> 
loginNamel:<input type="text" name="uMap['ul'] .loginName"><br> 
loginPwdl:<input type="password" name="uMap['ul'] .loginPwd"><br> 
provincel:<input type="text" name="uMap['ul'] .address.province"> 
<br> 
cityl:<input type="text" name="uMap['ul'] .address.city"><br> 
loginName2:<input type="text" name="uMap['u2'] .loginName"><br> 
loginPwd2:<input type: 
province2:<input type="text" name="uMap['u2'] .address.province"> 
<br> 
city2:<input type="text" name="uMap['u2'] .address.city"><br> 
<input type="submit" value=" 提 交 "> 

</form> 


"password" name="uMap['u2'] .loginPwd"><br> 


重启 Tomcat， 浏 览 页 面 index.jsp， 在 表单 中 分 别 输入 两 个 用 户 的 信息 。 第 一 个 用 户 的 
用 户 名 “my”、 密 码 “123456”、 省 份 “JiangSu” 和 城市 “NanJing”; 第 二 个 用 户 的 用 户 
名 “sj”、 密 码 “123456”、 省 份 “JiangSu” 和 城市 “YangZhou”。 单 击 “ 提 交 ” 按 钮 ， 
控制 台 输 出 如 下 所 示 : 
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User[loginName=my, 10ginPwd=123456,address=Address [province=JiangSu, 


city=NanJing]] 

User[loginName=sj, loginPwd=123456,address=Address [province=JiangSu, 

city=YangZzhou]] 

从 控制 台 输出 可 以 看 出 ， 表 单 中 输入 的 两 个 用 户 的 信息 成 功 传递 到 控制 器 方法 getUser 
的 UserMap 类 型 的 参数 uMap 中 。 


7.4 控制 器 类 处 理 方法 的 返回 值 类 型 


在 前 面 的 示例 中 ， 当 控制 器 处 理 完 请 求 时 ， 会 以 字符 串 的 形式 返回 逻辑 视图 名 。 除 了 
String 类 型 外 ，Spring MVC 返回 的 类 型 还 有 ModelAndView、Model、ModelMap、Map 等 。 

如 果 返 回 类 型 是 ModelAndView， 则 其 中 可 包含 视图 和 模型 信息 ， 且 Spring MVC 会 将 
模型 信息 存放 到 request 域 中 。 在 UserController 类 中 添加 returmmModelAndView0 方 法 ,返回 
ModelAndView 类 型 。 代 码 如 下 : 

@RequestMapping ("/returnModelAndView") 

public ModelAndView returnModelAndView() { 

String viewName="success"; 


ModelAndView mv=new ModelAndView (viewName); 
User user = new Userl("zhangsan", "123456", new Address ("jiangsu", 


"nanjing")); 
mv.addobject ("user", user); 
return mv; 


} 

在 index.jsp 页 面 中 添加 一 个 ModelAndView 超 链 接 ， 如 下 所 示 : 

<a href="../user/returnModelAndView">ModelAndView</a><br><br> 

在 success.jsp 页 面 中 添加 用 于 访问 ModelAndView 对 象 中 保存 的 User 对 象 的 代码 ， 如 
下 所 示 : 

ModelAndView:${requestScope.user } 

重启 Tomcat, 浏览 页 面 index.jsp, 单 击 ModelAndView 链接 , success.jsp 页 面 显示 如 下 : 


欢迎 来 学 习 Spring MVC! ModelAndView:User [loginName=zhangsan, loginPwd=123456, 
address=Address [province=jiangsu, city=nanjing]] 


存 入 ModelAndView、Model、ModelMap、Map 中 的 数据 对 象 ， 可 以 通过 request 作用 
域 来 访问 。 


7.5 ”保存 模型 属性 到 HttpSession 


通过 在 控制 器 类 的 相应 方法 上 标注 @SessionAttributes 注解 ， 可 将 模型 数据 保存 到 
HttpSession 中 ， 以 便 多 个 请 求 之 间 共 用 该 模型 属性 。 在 UserController 类 中 添加 方法 
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sessionAttributes， 先 将 模型 属性 user 保存 到 ModelMap 中 ， 并 在 控制 器 类 UserController 上 
标注 @SessionAttributes 注解 ， 将 User 类 型 的 模型 属性 user 存 入 HttpSession 中 ， 代 码 如 下 ; 


Package com. springmvc -controller7 


import org.springframework.web.bind.annotation.SessionAttributes; 
Q@Controller 
@RequestMapping (value="/user") 
Q@SessionRttributes (value={"user"}) 
public class UserController { 
@RequestMapping ("/sessionAttributes") 
public String sessionAttributes (ModelMap model) { 
User user = new User("lisi", "123456", new Address("jiangsu", 
"yangzhou")); 
model.put ("user", user); 
return "success"; 


} 
在 index.jsp 页 面 中 添加 一 个 Session Attributes 超 链接 ， 如 下 所 示 : 


<a href="../user/sessionAttributes">Session Attributes</a><br><br> 


在 successjsp 页 面 中 添加 用 于 访问 保存 到 HttpSession 中 的 User 对 象 的 代码 ,如 下 所 示 : 
HttpSeesion 中 保存 的 user: ${sessionscope.user } 


重启 Tomcat, 浏览 页 面 index.jsp， 单 击 Session Attributes 链接 ，success.jsp 页 面 显 示 
如 下 : 


HttpSeesion 中 保存 的 user: Users [loginName=lisi, loginPwd=123456, 
address=Address [province=jiangsu, city=yangzhou]] 


7.6 在 控制 器 类 的 处 理 方法 执行 前 执行 指定 的 方法 


如 果 想 让 一 个 方法 在 控制 器 类 的 所 有 处 理 方法 之 前 执行 ， 可 以 通过 在 该 方法 上 标注 
@ModelAttribute 注解 来 实现 。 
在 UserController 类 中 添加 getUser0 方 法 ， 在 方法 上 标注 @ModelAttribute 注解 。 在 
getUser( 方 法 中 实例 化 User 对 象 user, 保存 到 Model 中 , getUser() 方 法 的 返回 值 为 对 象 user。 
@ModelAttribute 
public User getUser (Model model) { 
User user = new User("wangwu", "123456", new Address ("JiangSu", 
" Suzhou") ) 
model.addAttribute ("user", user); 


return user; 


} 


然后 在 UserController 类 中 添加 modelAttribute0 方 法 ， 并 删除 UserController 类 前 面 添 
加 的 @SessionAttributes(value={"user"} ) 注 解 ， 代 码 如 下 : 
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@RequestMapping("/modelAttribute") 
public String modelAttribute(User user) { 


System.out.println (user); 
return "success"; 


} 
在 index.jsp 页 面 中 添加 一 个 Model Attribute 超 链接 ， 如 下 所 示 : 


<a href="../user/modelAttribute">Model Attribute</a><br><br> 


重启 Tomcat， 浏 览 页 面 index.jsp， 单 击 Model Attribute 超 链接 ， 控 制 台 输出 如 下 : 

User[loginName=wangwu, loginPwd=123456, address=Address [province=JiangSu, 

city=SuZzhou]] 

单 击 Model Attribute 链接 时 ， 请 求 被 UserController 类 中 的 modelAttribute 方法 处 理 ， 
方法 中 没有 对 对 象 user 进行 初始 化 ， 而 控制 台 输出 显示 对 象 user 已 经 被 初始 化 过 ， 这 一 初 
始 化 过 程 显 然 是 在 使 用 @ModelAttribute 注解 标注 的 getUser0 方 法 中 完成 的 。 也 就 是 说 在 执 
行 方 法 modelAttribute0 前 ， 先 调用 了 getUser0 方 法 ， 实 例 化 对 象 user 后 将 其 存 入 Model， 
又 因为 getUser() 方 法 返回 了 该 对 象 user， 被 传递 给 modelAttribute 方法 的 参数 user。 

success.jsp 页 面 显示 如 下 所 示 : 

欢迎 来 学 习 Spring MVC! ModelAndView:User[loginName=wangwu, loginPwd=123456, 

address=Address [province=JiangSu,city=SuZzhou]] 

在 getUser() 方 法 中 ， 对 象 user 被 存 入 Model， 访问 request 作用 域 可 以 获得 对 象 user 的 
值 。 由 于 对 象 user 没有 保存 在 HttpSeesion 中 ， 访 问 session 作用 域 无 法 获取 对 象 user 的 值 。 


7.7 ”直接 页 面 转发 、 自 定义 视图 与 页 面 重 定向 


1. 直接 页 面 转发 

如 果 想 不 经 过 控制 器 类 的 处 理 方法 直接 转发 到 页 面 , 可 以 通过 使 用 <mvc:view-controller> 
元 素来 实现 。 在 Spring MVC 配置 文件 springmvc.xml 中 ， 添 加 <mvc:view-controller> 元 素 ， 
其 配置 如 下 所 示 : 


<mvc:view-controller path="/success" view-name="success"/> 
<mvc:view-controller path="/index" view-name="index"/> 


重启 Tomcat， 在 浏览 器 中 直接 输入 地 址 “http://localhost:8080/springmve-2/success”， 
页 面 成 功 转发 到 success.jsp， 而 地 址 栏 并 没有 变化 。 

需要 注意 ， 如 果 在 springmve.xml 文件 中 没有 添加 <mvc:annotation-driven 这 元 素 ， 浏 览 
index.jsp 页 面 中 的 超 链接 时 会 出 现 问题 。 使 用 <mvc:annotation-driven> 元 素 后 ， 会 自动 注册 
RequestMappingHandlerMapping、 RequestMappingHandlerAdapter 和 ExceptionHandlerExceptionResolver 
这 三 个 Bean， 就 可 以 解决 问题 。 

2. 自 定义 视图 


通过 使 用 BeanNameViewResolver 类 可 以 实现 用 户 自 定义 的 视图 。 创 建 一 个 类 MyView， 
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实现 View 接口 ， 存 放 在 新 建 的 com.springmvc.view 包 中 ， 实 现 一 个 简单 的 自 定 义 视 图 。 


Package com.springmvc.view; 
import java.util.Map; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import org.springframework.stereotype.Component; 
import org.springframework.web.servlet .View; 
@Component 
public class MyView implements View { 
Qoverride 
public String getContentType() { 
return "text/html"; 
于 
Qoverride 
public void render (Map<String, ?> arg0, HttpServletRequest request, 
HttpServletResponse response) throws Exception { 
response.getWriter() .println("hello,this is my view"); 


} 


在 MyView 类 上 标注 @Component 注解 ，Spring 会 为 该 类 创建 Bean 实例 。 在 render 方 
法 中 ， 向 浏览 器 输出 一 个 简单 的 字符 串 “hello,this is my view” 作 为 自 定义 页 面 内 容 。 
在 springmvc.xml 文件 中 配置 视图 解析 器 ， 使 用 视图 名 称 实现 视图 解析 。 


<bean class="org.springframework.web.servlet.view. 
BeanNameViewResolver"> 

<property name="order" value="50" /> 
</bean> 


在 UserController 类 中 添加 方法 beanNameViewResolver， 来 使 用 自 定义 视图 。 
@RequestMapping ("/beanNameViewResolver") 
public String beanNameViewResolver(){ 

return "myView"; 


由 于 BeanNameViewResolver 类 是 根据 Bean 的 名 称 来 解析 视图 的 ， 自 定义 的 视图 类 
MyView 在 Spring IOC 中 的 Bean 实例 名 为 “myView”， 因 此 beanNameViewResolver 方法 
的 返回 值 应 该 使 用 Bean 实例 名 “myView”。 

在 index.jsp 页 面 中 添加 一 个 BeanNameViewResolver 超 链 接 ， 如 下 所 示 : 


互 


<a href="../user/beanNameViewResolver">BeanNameViewResolver</a><br> 


重启 Tomcat, 浏览 页 面 index.jsp， 单 击 BeanNameViewResolver 链接 ， 显 示 自 定义 的 页 
面 内 容 ， 如 下 所 示 : 


Hello, This is my view? 


3. 页 面 重 定向 
在 前 面 的 示例 中 ， 控 制 器 类 的 方法 返回 的 字符 串 默 认 通 过 转发 的 方式 跳 转 到 目标 页 面 ， 
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如 果 返 回 的 字符 串 中 带 redirect 前 级 ， 则 会 采用 重 定向 的 方式 跳 转 到 目标 页 面 。 
在 UserController 类 中 添加 redirect0 方 法 ， 在 返回 字符 串 中 使 用 重 定向 。 


@RequestMapping ("/redirect") 
public String redirect(){ 


return "redirect:/ch07/index.jsp"; 


} 
在 index.jsp 页 面 中 添加 一 个 Redirect 超 链接 ， 如 下 所 示 : 


<a href="../user/redirect">Redirect</a><br><br> 


重启 Tomcat， 浏 览 页 面 index.jsp， 单 击 Redirect 链接 ， 页 面 重 定向 到 index.jsp。 


7.8 Spring MVC 返回 JSON 数据 


现 如 今 由 于 移动 互联 网 的 兴起 , 简洁 的 JSON 格式 成 为 很 多 系统 之 间 进 行 交 互 的 主要 格 
式 。 移 动 端的 前 台 系 统 (Android 或 IOS) 与 后 台 交互 时 ， 普 遍 使 用 HITP 协议 进行 JSON 格 
式 信 息 的 传输 ， 以 实现 移动 系统 前 后 端 之 间 的 信息 交互 。 还 有 一 些 网 页 异步 加 载 功 能 ， 也 
是 利用 JavaScript 语言 或 相关 插件 (jQuery 等 前 端 脚本 框架 ) 实 现 Ajax 异步 数据 请 求 , 与 后 台 
进行 JSON 格式 的 HTTP 信息 交互 。 

在 Spring MVC 中 ， 为 开发 者 提供 了 一 种 简洁 的 实现 不 同 数据 格式 交互 的 机 制 JSON、 
XML 以 及 其 他 数据 格式 )， 其 会 将 前 台 传 来 的 JSON/XML 等 格式 信息 自动 转换 为 相应 的 包 
装 类 ， 或 者 将 输出 的 信息 转换 为 JSON/XML 等 格式 的 数据 。 

一 般 情况 下 ， 利 用 注解 @ResponseBody 都 会 在 异步 获取 数据 时 使 用 ， 被 其 标注 的 处 理 
方法 返回 的 数据 将 输出 到 响应 流 中 ， 由 客户 端 获 取 并 显示 数据 。 如 果 想 让 控制 器 类 的 处 理 
方法 返回 JSON 数据 ， 可 以 使 用 HttpMessageConverter 类 来 实现 。 如 果 不 想 显 式 地 创建 
HttpMessageConverter 的 Bean 实例 ， 可 以 在 Spring MVC 配置 文件 springmvc.xml 中 添加 
<mvc:annotation-driven> 元 素 。 


<mvc:annotation-driven /> 


在 JSON 的 使 用 中 ， 四 种 常见 的 JSON 技术 如 下 。 

@ json-lib: json-lib 是 最 早 也 是 应 用 最 广泛 的 json 解析 工具 ， 它 的 缺点 就 是 依赖 很 多 
第 三 方 包 , 如 commons-beanutils.jar、 commons-collections-3.2.jar、 commons-lang-2.6.jar、 
commons-logging-1.1.1.jar、ezmorph-1.0.6.jar。 对 于 复杂 类 型 的 转换 ，json-lib 对 于 
JSON 转换 成 Bean 还 有 缺陷 , 比如 一 个 类 里 面 若 出 现 另 一 个 类 的 List 或 者 Map 集 
合 ，json-lib 从 JSON 到 Bean 的 转换 就 会 出 现 问题 。 所 以 json-lib 在 功能 和 性 能 上 
都 不 能 满足 现在 互联 网 化 的 需求 。 

@ ”Jackson: 开源 的 Jackson 是 Spring MVC 内 置 的 JSON 转换 工具 。 相 比 json-lib 框 
架 ，Jackson 所 依赖 的 jar 包 较 少 ， 简 单 易 用 并 且 性 能 也 要 相对 高 些 。 而 且 Jackson 
社区 比较 活跃 ， 更 新 速度 也 比较 快 。 但 是 Jackson 对 于 复杂 类 型 的 从 JSON 转换 到 
Bean 会 出 现 问题 ， 一 些 集合 Map、List 的 转换 也 不 能 正常 实现 。 而 Jackson 对 于 复 
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杂 类 型 的 从 Bean 转换 到 JSON， 转 换 的 JSON 格式 不 是 标准 的 JSON 格式 。 
@ ”Gson: Gson 是 目前 功能 最 全 的 JSON 解析 器 ，Gson 最 初 是 应 Google 公司 内 部 需 
求 而 由 Google 自行 研发 的 ， 自 从 2008 年 5 月 公开 发 布 第 1 版 后 已 被 许多 公司 和 
用 户 应 用 。Gson 的 应 用 主要 是 toJson 与 fomJson 两 个 转换 函数 ， 它 们 无 依赖 且 不 
需要 额外 的 jar 文件 , 能 够 直接 在 JDK 上 运行 。 Gson 可 以 完成 复杂 类 型 的 从 JSON 
到 Bean 或 从 Bean 到 JSON 的 转换 ， 是 JSON 解析 的 利器 。 其 在 功能 上 无 可 挑剔 ， 
但 是 性 能 比 FastJson 稍 差 。 
@ FastJson: FastJson 是 一 个 用 Java 语言 编写 的 高 性 能 的 JSON 处 理 器 ， 由 阿里 巴巴 
公司 开发 。 它 的 特点 是 无 依赖 ， 不 需要 额外 的 jar 文件 ， 能 够 直接 在 JDK 上 运行 。 
但 是 FastJson 在 复杂 类 型 的 从 Bean 转换 到 JSON 上 会 出 现 一 些 问题 ， 可 能 会 因为 
引用 的 类 型 不 当 ， 导 致 SON 转换 出 错 ， 因 而 需要 指定 引用 。FastJson 采用 独创 的 
算法 ， 将 parse 的 速度 提升 到 极致 ， 超 过 所 有 JSON 库 。 
下 面 通 过 示例 介绍 如 何 使 用 Spring MVC 内 置 的 JackSon 技术 返回 JSON 数据 ， 实 现 步 
又 如 下 。 
(1) 下载 并 添加 JSON 的 相关 jar 包 。 
通过 浏览 器 访问 http://mvnrepository.com/open-source/json-libraries 网 址 ， 下 载 三 个 jar 
包 ， 如 图 7-4 所 示 。 
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7-4 下 载 JSON 的 相关 jar 包 
下 载 完 成 后 将 jackson-annotations-2.9.6.jar、jackson-core-2.9.6.jar 和 jackson-databind-2.9.6.jar 
这 3 个 jar 包 复制 到 springmvc-2 项 目的 WebContent\WEB-INF\lib 目录 下 。 
(2) 下 载 并 引入 jQuery 资源 文件 。 
访问 https://jquery.com/download/ 网 址 ， 下 载 jquery-3.3.1.minjjs 文件 ， 如 图 7-5 所 示 。 
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For help when upgrading jQuery, please see the upgrade guide most relevant to your 
version. We also recommend using the jQuery Migrate plugin 


Download the uncompressed, development jQuery 3.3.1 


Download the map file for iQuery 3.3.1 


You can also use the slim build, which excudes the aiax and effects modules: v 


7-5 下 载 jQuery 资源 文件 


在 springmvc-2 项 目的 WebContent 目录 下 创建 一 个 文件 夹 scripts， 将 jQuery 资源 文件 
jquery-3.3.1.min.js 复制 到 其 中 。 

(3) 处 理 静 态 资源 文件 jquery-3.3.1.min.js。 

在 Spring MVC 配置 文件 springmvc.xml 中 添加 <mvc:default-servlet-handler /> 元 素 ， 如 
下 所 示 : 


<mvc:default-servlet-handler /> 


该 元 素 将 在 Spring MVC 上 下 文中 定义 一 个 DefaultServletHttpRequestHandler， 它 会 对 
进入 DispatcherServlet 的 请 求 进行 得 查 ， 如 果 发 现 是 没有 经 过 映射 的 请 求 ， 就 将 该 请 求 交 由 
Web 应 用 服务 器 默认 的 Servlet 处 理 。 如 果 不 是 静态 资源 的 请 求 ， 才 由 DispatcherServlet 继 
续 处 理 . 如 果 没 有 添加 <mvc:default-servlet-handler /> 元 素 , Web 容器 启动 时 会 抛 出 如 下 异常 : 


警告 : No mapping found for HTTP request with URI 
[/springmvc-2/scripts/jquery-3.3.1.min.js] in DispatcherServlet with name 
'dispatcherServlet"' 


(4) 在 UserController 类 中 添加 returnJson0 方 法 ,在 该 方法 前 添加 @ResponseBody 注解 ， 
如 下 所 示 : 


@ResponseBody 
@RequestMapping ("/returnJson") 
public Collection<User> returnJson() { 
Map<Integer, User> us = new HashMap<Integer, User>(); 
us.put (1, new User("zhangsan", "123456", 
new Address ("Jiangsu", "NanJing"))); 
us.put (2, new User ("lisi", "123456", 
new Address ("Jiangsu", "YangZzhou"))); 
us.put (3, new User("wangwu", "123456", 
new Address ("Jiangsu", "SuZzhou"))); 
return us.values(); 


} 


returnJson 方法 的 返回 类 型 为 Collection<User>， 但 在 标注 @ResponseBody 注解 后 ， 返 
回 类 型 就 转变 为 JSON 格式 了 。 
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(5) 在 index.jsp 页 面 的 <head></head> 标 签 中 通过 <scrip 伺 标签， 引入 jQuery 资源 文件 
jquery-3.3.1.minjs， 如 下 所 示 : 


<script type="text/javascript" src="../scripts/jquery-3.3.1.min.js"> 
</script> 


在 index.jsp 页 面 中 添加 一 个 Test Json 超 链接 ， 如 下 所 示 : 


<a href="javascript:void(0)" id="returnJson" onclick="getUserJson()"> 
Test Json</a><br><br> 


单 击 Test Json 链接 , 将 执行 一 个 JavaScript 脚本 函数 getUserJson0。 在 index.jsp 页 面 中 
新 建 <seript> 脚 本 标签 ， 并 在 其 中 创建 函数 getUsersJson0， 如 下 所 示 


<script type="text/javascript"> 
function getUserJson() { 
var url = "../user/returnJson"; 
Var args = {}; 
$.post (url, args, function(data) { 
1D); 


ys 

在 getUserJson 函数 中 ,使 用 $.post 将 请 求 提交 到 控制 器 类 UserController 中 的 returnJson() 
方法 ， 参 数 data 就 是 retumJson 方法 执行 后 返回 的 JSON 格式 的 数据 。 

(6) 重启 Tomcat， 使 用 正 浏览 器 浏览 页 面 mdexjsp， 按 F12 键 ， 进 入 开发 人 员 模 式 ， 
单 击 “网 络 ”， 单 击 Test Json 链接 ， 在 名 称 路 径 上 就 会 出 现 retumJson 的 请 求 ， 单 击 右 侧 
出 现 的 “正文 ”选项 卡 标签 ， 单 击 “ 响 应 正文 ”, 在 下 方 就 会 出 现 相 应 的 JSON 格式 的 数据 ， 
如 图 7-6 所 示 。 
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图 7-6 查看 JSON 格式 的 数据 
注 : 不 同 浏览 器 的 调试 方式 也 不 同 。 
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7.9 小 结 


本 章 首 先 介绍 了 Spring MVC 的 常用 注解 , 包括 @Controller、@RequestMapping 两 个 最 
重要 的 注解 ， 以 及 3 种 请 求 映 射 方式 。 接 着 介绍 常用 参数 绑 定 注解 ， 通 过 绑 定 控制 器 类 处 
理 方法 入 参 、 控 制 器 类 处 理 方法 的 返回 值 类 型 、 保 存 模型 属性 到 HttpSession、 在 控制 器 类 
的 处 理 方法 执行 前 执行 指定 方法 等 来 讲解 绑 定 参数 注解 。 最 后 介绍 了 在 Spring MVC 中 将 数 
据 转换 成 JSON 格式 的 方法 。 
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我 们 在 进行 Spring MVC 项 目 开 发 时 ， 一 般 会 使 用 EL 表达 式 和 JSTL 标签 来 完成 页 面 
视图 ， 其 实 Spring MVC 也 有 一 套 自己 的 表单 标签 库 。Spring 从 2.0 开始 , 通过 Spring MVC 
表单 标签 库 ， 可 以 很 容易 地 将 模型 数据 中 的 表单 对 象 绑 定 到 HTML 表单 元 素 中 。 相 比 其 他 
的 标签 库 ，Spring 的 标签 库 集 成 在 Spring Web MVC 框架 中 ,因此 它们 可 以 直接 使 用 命令 对 
象 和 其 他 控制 器 处 理 的 数据 对 象 ， 这 样 JSP 更 容易 开发 、 阅 读 和 维护 。 


8.1 Spring MVC 表单 标签 库 概述 


表单 标签 库 的 实现 类 在 spring-webmvc-5.0.4.RELEASE.jar 文件 中 ， 要 使 用 Spring MVC 
的 表单 标签 库 ， 首 先 要 和 使 用 JSTL 标签 一 样 , 必须 在 JSP 页 面 中 添加 一 行 引用 Spring 标签 
库 的 taglib 指令 声明 ， 如 下 所 示 : 


<%@ taglib prefix="fm" uri="http://www.springframework.org/tags/form" %> 


引入 标签 声明 之 后 就 可 以 使 用 Spring 表单 标签 了 。 表 8-1 显示 
标签 。 
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续 表 
标 签 说 明 
< fm:password /> 泻 染 密码 框 <input type="password"> 元 素 
<fm:hidden /> 泻 染 隐藏 框 <input type="hidden"> 元 素 


泻 染 多 行 输入 框 textarea 元 素 


<fm:textarea /> 


<fim:checkbox /> 泻 染 复 选 框 <input type="checkbox"> 元 素 
<fim:radiobutton /> 演 染 单 选 按钮 <input type="radio"> 元 素 
<fim:select /> 泻 染 下 拉 列 表 元 素 

<fm:option /> 泻 染 一 个 可 选 元 素 

<fim:errors /> 在 span 元 素 中 泻 染 字段 错误 


Spring 提供 了 十 多 个 表单 标签 ， 基 本 上 这 些 标签 都 拥有 以 下 共有 属性 。 

path: 属性 路 径 ， 表 示 表 单 对 象 属性 。 

cssClass: 表单 组 件 对 应 的 CSS 样式 类 名 。 

cssErrorClass: 当 提 交 表 单 后 报错 (服务 端 错误 ) 时 采用 的 CSS 样式 类 。 

cssStyle: 表单 组 件 对 应 的 CSS 样式 。 

htmlEscape: 绑 定 的 表单 属性 值 是 否 要 对 HTML 特殊 字符 进行 转换 ， 默 认为 true。 
此 外 ， 表 单 组 件 标签 也 拥有 HIML 标签 的 各 种 属性 ， 如 id、onclick 等 属性 ， 可 以 根据 

需要 灵活 使 用 。 


8.2 Spring MVC 表单 标签 库 


8.2.1 form 标签 


Spring MVC 中 的 form 标签 主要 有 两 个 作用 : 
@ 自动 绑 定 Model 中 的 一 个 属性 值 到 当前 form 对 应 的 实体 对 象 ， 默 认为 command 
属性 ， 这 样 我 们 就 可 以 在 form 表单 体 中 方便 地 使 用 该 对 象 的 属性 了 。 
@ 支持 我 们 在 提交 表单 时 使 用 除了 GET 和 POST 之 外 的 其 他 方法 进行 提交 ， 包 括 
DELETE 和 PUT 等 。 
form 标 签 除了 前 面 介绍 的 共有 属性 外 ,还 有 以 下 常用 的 属性 ,不 包含 HTML 中 如 method 
和 action 等 属性 ， 如 下 所 示 。 
@ modelAttribute: form 绑 定 的 模型 属性 名 称 ， 默 认为 command。 
@ commandName: form 绑 定 的 也 是 模型 属性 名 称 ， 默 认为 command。 其 作用 与 
modelAttribute 属性 相同 。 
@ ”acceptCharset: 定义 服务 器 接受 的 字符 编码 。 
commandName 属性 是 其 中 最 重要 的 属性 ， 它 定义 了 模型 属性 的 名 称 ， 其 中 包含 一 个 绑 
定 的 JavaBean 对 象 ， 该 对 象 的 属性 将 用 于 填充 所 生成 的 表单 。 如 commandName 属性 存在 ， 
则 必须 在 返回 包含 该 表单 的 视图 的 请 求 处 理 方法 中 添加 响应 的 模型 属性 。 
通常 我 们 都 会 指定 commandName 或 modelAttribute 属性 , 指定 绑 定 到 的 JavaBean 的 名 


@< ee 


第 8 章 Spring MVC 标签 库 


称 ， 这 两 个 属性 功能 基本 一 致 。 
8.2.2 input 标签 


Spring MVC 的 input 标签 会 被 泻 染 为 一 个 类 型 为 text 的 普通 HTML input 标签 。 使 用 
Spring MVC 的 input 标签 的 唯一 作用 就 是 绑 定 表单 数据 ， 通 过 path 属性 来 指定 要 绑 定 的 
Model 中 的 值 。 

下 面 通过 示例 来 讲解 form 和 input 标签 的 使 用 ， 有 具体 步骤 如 下 。 

(1) 将 项 目 springmvc-2 复制 并 重 命名 为 springmvc-3， 再 导入 到 Eclipse 开发 环境 中 。 
选中 springmvc-3 项 目 并 右 击 ， 在 快捷 菜单 中 选择 Properties 命令 ， 进 入 属性 设置 界面 ， 找 
到 Web Project Settings 选项 , 将 右 侧 Context Root: 文 本 框 中 的 springmvc-2 改 为 springmvc-3， 
单 击 Apply and Close 按钮 。 删 除 src 下 的 相关 包 ， 删 除 WebContent 下 的 ch06 和 ch07 文件 
夹 ， 保 留 相 关 jar 包 以 及 springmvc.xml 配置 文件 。 

(2) 在 项 目的 WebContent 路 径 下 新 建 一 个 ch08 文件 夹 ， 在 该 文件 夹 中 新 建 registerjsp 
页 面 ， 并 在 页 面 中 添加 一 行 引用 Spring 标签 库 的 声明 ， 如 下 所 示 : 


<%@ taglib prefix="fm" uri="http://www.springframework.org/tags/form" %> 


<body> 
<h3> 注 册页 面 </h3> 
<fm:form action="register" method="post"> 
姓名 : <fm:input path="name"/><br><br> 
性 别 : <fm: input path="sex"/><br><br> 
年 龄 : <ftm: input path="age"/><br><br> 
</fm: form> 
</body> 


如 果 Model 中 存在 一 个 属性 名 称 为 command 的 JavaBean， 而 且 该 JavaBean 拥有 属性 
name、sex 和 age, 则 在 泻 染 上 面 代 码 时 就 会 取 command 的 对 应 属性 值 赋 给 对 应 标签 的 属性 。 

(3) web.xml 配 置 不 变 ,修改 springmvc.xml 配 置 文件 ,将 视图 解析 器 中 的 prefix( 前 级 )ch07 
改 为 ch08， 代 码 如 下 : 


<property name="prefix" value="/ch08/"></property> 


(4) 在 src 下 新 建 com.springmve.entity 包 ， 并 在 包 中 新 建 类 User， 如 下 所 示 : 


Package com.springmvc .entity7 
public class User { 
private String name; 
private String sex; 
private int age; 
// 省 略 属性 的 setter、getter 方法 
// 省 略 构造 方法 
} 


(5) 在 src 下 新 建 com.springmvc.controller 包 ， 在 包 中 新 建 UserController 类 ， 并 通过 
@Controller 和 @RequestMapping 注解 实现 一 个 register() 方 法 ， 如 下 所 示 : 
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@Controller 
public class UserController { 


@RequestMapping (value="/register", method = RequestMethod.GET) 
Public String register(Model model) { 

User user=new User ("zhangsan", " 男 ", 23); 

//model 中 添加 属性 command， 值 为 user 对 象 

model .addAttribute ("command" ,user); 


return "register"; 


} 


在 上 述 代 码 中 ， 将 user 设置 到 model 中 ， 属 性 名 为 ee 
[¢ OE Er 
文件 四 六 入 二 看 收 芭 闪 (A) 工具 (帮助 


注册 页 面 


command。 
(6) 部 署 springmvc-3 这 个 Web 项 目 ， 启 动 Tomcat， 
在 浏览 器 的 地 址 栏 中 访问 htpWlocalhost8080/springmvc-3/ | jg, jia 一 一 一 
register 进行 测试 ， 运 行 效果 如 图 8-1 所 示 。 性 别 ; 启 一 一 一 一 一 
在 上 述 代 码 中 ,假设 Model 中 存在 一 个 属性 名 为 ”| 
command 的 JavaBean， 且 它 的 name、sex 和 age 属性 分 
别 为 “zhangsan”“ 男 ”和 “23”， 则 在 浏览 器 页 面 单 击 图 8-1 测试 form 和 input 标签 
右键 ,选择 “查看 源 ”命令 ,可 以 看 到 Spring MVC 的 标 
签 泻 染 时 生成 的 html 代码 如 下 所 示 : 
<form Ba Meonmmanay action="register" method="post"> 
姓名 :<input id="name" name="name" type="text" value="zhangsan"/><br><br> 
性 别 : <input id="sex" name="sex" type="text" value=" 男 "/><br><br> 
年 龄 : <input id="age" name="age" type="text" value="23"/><br><br> 
</form> 
从 生成 的 代码 可 以 看 出 ， 当 没有 指定 form 标签 的 id 属性 时 ， 它 会 自动 获取 form 标签 
绑 定 的 Model 中 的 对 应 属性 名 称 command 作为 id， 而 对 于 input 标签 ， 在 没有 指定 id 的 情 
况 下 它 会 自动 获取 path 指定 的 属性 值 作为 它 的 id 和 name。 
Spring MVC 指定 form 标签 默认 自动 绑 定 的 是 Model 的 command 属性 值 , 那么 当 form 
对 象 对 应 的 属性 名 称 不 是 command 时 ， 怎 么 办 ? 对 于 这 种 情况 ，Spring 提供 了 
commandName 属性 ， 可 通过 该 属性 来 指定 将 使 用 Model 中 哪个 属性 作为 form 标签 需要 绑 
定 的 command， 除 了 commandName 属性 外 ， 指 定 modelAttribute 属性 也 可 以 达到 相同 的 
效果 。 
修改 register.jsp 页 面 中 的 form 标签 , 添加 modelAttribute 属性 值 为 “user”， 如 下 所 示 : 


<fm: form odelAttripute="usery action="register" method="post"> 


</fm: form> 


修改 UserController 类 中 的 register 方法 , 将 model 属性 值 “command” 修 改 为 “user”， 
如 下 所 示 : 


model.addAttribute ("user",user); 


重启 Tomcat, 在 浏览 器 的 地 址 栏 中 访问 http://localhost:8080/springmvc-3/register 进行 测 
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试 , 其 运行 效果 与 修改 前 一 致 ,查看 页 面 源 文件 , form 表单 的 id 属性 变 为 user, 不 是 model 
默认 的 command， 如 下 所 示 : 


<form Ba ose action="register" method="post"> 
姓名 :<input id="name" name="name" type="text" value="zhangsan"/><br><br> 
性 别 : <input id="sex" name="sex" type="text" value=" 男 "/><br><br> 
年 龄 : <input id="age" name="age" type="text" value="23"/><br><br> 
</form> 


8.2.3 ”password 标签 


Spring MVC 的 password 标签 会 被 泻 染 为 一 个 类 型 为 password 的 普通 HTML input 标 签 。 
password 标签 的 用 法 和 input 标签 相似 ， 也 能 绑 定 表单 数据 ， 只 是 它 生成 的 是 一 个 密码 框 ， 
并 且 多 了 一 个 showPassword 属性 ， 表 示 显 示 或 遮盖 密码 ， 默 认 值 为 false。 

下 面 是 password 标签 的 示例 : 


<fm:password path="password"/> 


上 面 代码 运行 时 ，password 标签 会 被 泻 染 成 下 面 的 HTML 元素 : 


<input id="password" name="password" type="password" Value=""/> 
Pp 


8.2.4 ”hidden 标签 


Spring MVC 的 hidden 标签 会 被 泻 染 为 一 个 类 型 为 hidden 的 普通 HTML input 标签 。 其 
用 法 和 input 标签 类 似 ， 也 能 绑 定 表单 数据 ， 只 是 生成 的 是 一 个 隐藏 域 ， 界 面 上 看 不 到 任何 
内 容 。 

下 面 是 hidden 标签 的 示例 : 

<fm:hidden path="hid"/> 

上 面 代码 运行 时 ，hidden 标签 会 被 泻 染 成 下 面 的 HTML 元 素 : 


<input id="hid" name="hid" type="hidden" value=""/> 


8.2.5 ”textarea 标签 


Spring MVC 的 textarea 标签 会 被 泻 染 为 一 个 类 型 为 textarea 的 普通 HTML 标签 .textarea 
是 一 个 支持 多 行 输入 的 HTML 元 素 。 
下 面 是 textarea 标签 的 示例 : 


<fm:textarea path="remark" rows="5" cols="20"/> 


上 面 代码 运行 时 ，textarea 标签 会 被 泻 染 成 下 面 的 HTML 元 素 : 


<textarea id="remark" name="remark" rows="5" cols="20"></textarea> 
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8.2.6 ”checkbox 标签 


Spring MVC 的 checkbox 标签 会 被 泻 染 为 一 个 类 型 为 checkbox 的 普通 HTML 标签 。 
checkbox 标签 除了 8.1 小 节 介 绍 的 共有 属性 外 ,还 有 一 个 label 属性 , 将 其 作为 label 被 泻 染 
的 复 选 框 的 值 。 

checkbox 标签 绑 定 的 数据 类 型 如 下 。 

@ 绑 定 boolean 数据 : 当 checkbox 绑 定 的 是 一 个 boolean 数据 时 ， 其 状态 与 被 绑 定 的 

boolean 数据 的 状态 是 一 样 的 ， 即 为 false 时 复 选 框 不 选中 ， 为 true 时 复 选 框 选中 。 

e@ 绑 定 列表 数据 : 列表 数据 主要 包括 数组 、List 和 Set。 假 设 有 一 个 User 类 ，User 

类 中 有 一 个 类 型 为 List 的 属性 courses。 当 要 显示 该 User 的 courses 时 ， 可 以 使 用 
checkbox 标签 来 绑 定 courses 数据 进行 显示 。 当 checkbox 标签 的 value 属性 在 我 们 
绑 定 的 列表 数据 中 存在 时 ， 该 checkbox 将 为 选中 状态 。 

下 面 通过 示例 来 讲解 checkbox 标签 的 使 有 用， 具体 步骤 如 下 。 

(1) 在 springmvc-3 项 目 中 , 为 User 类 添加 一 个 boolean 类 型 的 变量 和 List<String> 类 型 
的 变量 ， 代 码 如 下 : 

Package com.springmvc .entity7 

import java.util.List; 

public class User { 

// 添加 讲解 checkbox 标签 所 用 属性 
private boolean reader; 
Private List<String> courses; 


public boolean isReader() { 
return reader; 


» 

public void setReader (boolean reader) { 
this.reader = reader; 

} 

public List<String> getCourses() { 
return courses; 

¥ 

public void setCourses (List<String> courses) { 
this. courses = courses; 


} 
// 省 略 User 类 的 构造 方法 
} 


(2) 在 UserController 类 中 ， 添 加 一 个 checkbox 方法 ， 并 通过 @RequestMapping 注解 实 
现 映射 ， 代 码 如 下 : 


@RequestMapping (value="/checkbox", method = RequestMethod .GET) 
public String checkbox (Model model) { 

User user=new User(); 

user.setReader (true); 

List<String> list=new ArrayList<string>(); 

1ist.add ("Java 程序 设计 "); 
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list.aqdd ("JavaEE 框架 技术 ") 7 
user.setCourses (list); 
model.addAttribute ("user",user); 
return "checkbox"; 


’ 


在 checkbox 的 方法 中 创建 了 User 对 象 ， 并 分 别 设置 了 变量 reader 和 courses 的 值 ， 设 
置 boolean 变量 reader 的 值 为 true, 页 面 的 checkbox 复 选 框 < 已 经 阅读 相关 协议 ”会 被 选中 ; 
为 集合 变量 courses 添加 “Java 程序 设计 ”和 “JavaEE 框架 技术 ”， 页 面 的 两 个 checkbox 
复 选 框 会 被 选中 ， 并 将 它们 添加 到 model 中 和 页 面 进行 绑 定 。 

(3) 在 WebContent/ch08 的 路 径 下 ， 新 建 checkbox.jsp 页 面 ， 并 在 页 面 中 添加 一 行 引用 
Spring 标签 库 的 声明 ， 如 下 所 示 : 


<%@ taglib prefix="fm" uri="http://www.springframework.org/tags/form" %> 
<body> 
<h3>fm: checkbox 标签 测试 </h3> 
<fm:form modelAttribute="user" method="post" action="checkbox"> 
选择 课程 : 
<fm:checkbox path="courses" value="Java 程序 设计 " label="Java 程序 设 
计 "/>gnbsp; 
<fm:checkbox path="courses" value="Java Web 程序 设计 " label="Java Web 
程序 设计 "/>&nbsp; 
<fm:checkbox path="courses"” value="JavaEE 框架 技术 "label="JavaEE 框 
架 技 术 "/>gnbsp; 
<br><br> 
<fm:checkbox path="reader" value="true"/> 已 经 阅读 相关 协议 
</fm: form> 
</body> 


(4) 重启 Tomcat， 在 浏览 器 的 地 址 栏 中 访问 http://localhost:8080/springmvc-3/checkbox 
进行 测试 ， 运 行 效果 如 图 8-2 所 示 。 


本 | x 
@ 国 hepy/ocalhost3080, D0 | 国 测 Kcheckbox 标 答 
文件 四 往 沪 EE) 可 看 MV) 收藏 庆生。 工具 DD 帮助 (H) 
fm:checkbox 标 签 测试 
选择 课程 。 回 Java 程 序 设计 口 Java Web 程 序 设 计 回 JavaEE 框 架 技术 
回 已 经 阅读 相关 协议 


8-2 测试 checkbox 标签 
8.2.7 radiobutton 标签 
Spring MVC 的 radiobutton 标签 会 被 泻 染 为 一 个 类 型 为 radio 的 普通 HTML input 标签 。 


radiobutton 标签 除了 8.1 小 节 介绍 的 共有 属性 外 ， 还 有 一 个 label 属性 ， 将 其 作为 label 被 演 
染 的 单 选 按钮 的 值 。 下 面 通 过 示例 来 讲解 radiobutton 标签 的 使 用 ， 有 具体 步骤 如 下 。 
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(1) 在 UserController 的 类 中 ， 添 加 一 个 radiobutton 方法 ， 并 通过 @RequestMapping 注 
解 实现 映射 ， 代 码 如 下 : 


@RequestMapping (value="/radiobutton", method = RequestMethod.GET) 
public String radiobutton (Model model) { 

User user=new User(); 

User -setSex( " 女 ") 区 

model .addRAttribute("user"v user) 7 

return "radiobutton"; 


| 

前 面 我 们 在 User 类 中 定义 过 sex 属性 ， 用 来 绑 定 页 面 的 radiobutton 标签 数据 。 在 
UserController 类 的 radiobutton 方法 中 ， 设 置 sex 变量 的 值 为 “ 女 ”， 则 页 面 的 radio 单 选 按 
钮 的 value=“ 女 ”会 被 选中 。 


(2) 在 WebContent/ch08 的 路 径 下 ， 新 建 radiobutton.jsp 页 面 ， 并 在 页 面 中 添加 一 行 引 
用 Spring 标签 库 的 声明 ， 如 下 所 示 : 


<%@ taglib prefix="fm" uri="http://www.springframework.org/tags/form" %> 


<body> 
<h3>fm:radiobutton 标签 测试 </h3> 
<fm: form modelAttribute="user" method="post" action="radiobutton"> 
性 别 : 
<fm:radiobutton path="sex" value=" 男 "/> 男 gnbsp; 
<fm:radiobutton path="sex"” value=" 女 "/> 女 gnbsp; 
</fm: form> 
</body> 


(3) 重启 Tomcat, 在 浏览 器 的 地 址 栏 中 访问 http://localhost:8080/springmve-3/radiobutton 
网 址 进行 测试 ， 运 行 效果 如 图 8-3 所 示 。 


- 0O x 
@ 国 http://localhost8080, 人 -CC 园 测试 radiobutton 标 签 x 
文件 昌 ”编辑 (E) ”查看 (V) ”收藏 夫 (A) ”工具 中 ”帮助 (H) 


fm:radiobutton 标 签 测试 
性 别 ， O 男 图 女 


8-3 测试 radiobutton 标签 


8.2.8 select 标签 


Spring MVC 的 select 标签 会 这 染 一 个 HTML select 元 素 ， 被 泻 染 元 素 的 选项 可 能 来 自 
items 属性 的 一 个 Collection、Map 及 Array， 或 者 来 自 一 个 嵌 套 的 option 或 者 options 标签 。 
select 标签 除了 8.1 小 节 介 绍 的 共有 属性 外 ， 还 包括 以 下 属性 。 


@ items: 用 于 指定 select 元 素 的 数据 源 类 型 , 如 Collection 接口 、Map 接口 或 者 Array 
数组 。 
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@ itemLabel: item 属性 中 定义 的 Collection、Map 或 者 Array 中 的 对 象 属性 ， 为 每 个 
select 元 素 提 供 label。 
@ itemValue: item 属性 定义 的 Collection、Map 或 者 Array 中 的 对 象 属性 ， 为 每 个 select 
元 素 提供 值 。 
其 中 , items 属性 特别 有 用 , 因为 它 可 以 绑 定 到 对 象 的 Collection、Map、Array, 为 select 
元 素 生成 选项 。 


8.2.9 option 标签 


Spring MVC 的 option 标签 会 泻 染 为 一 个 HIML option 元 素 。option 标签 的 主要 属性 是 
8.1 小 节 介绍 的 共有 属性 。 


8.2.10 ”options 标签 


Spring MVC 的 options 标签 会 泻 染 select 元 素 中 使 用 的 一 个 HTML option 元 素 列 表 。 
options 标签 除了 8.1 小 节 介绍 的 共有 属性 外 ， 还 包括 以 下 属性 。 

@ items: 用 于 生成 option 列表 元 素 的 对 象 的 Collection、Map 或 者 Array。 

@ itemLabel: item 属性 中 定义 的 Collection、Map 或 者 Array 中 的 对 象 属性 ， 为 每 个 
option 元 素 提供 label。 

@ itemValue: item 属性 定义 的 Collection、Map 或 者 Anmay 中 的 对 象 属性 ， 为 每 个 option 
元 素 提 供 值 。 

下 面 我 们 通过 示例 来 演示 select、option 和 options 标签 的 使 用 ， 步 骤 如 下 。 

(1) 在 User 类 中 ， 添 加 deptId 属性 ， 并 生成 setter 和 getter 方法 ， 代 码 如 下 : 


public class User { 
// 省 略 前 面 已 定义 过 的 属性 
private int deptId; 
// deptId 属性 的 setter、getter 方法 
public int getDeptId() { 
return deptId; 
} 
Public void setDeptId(int deptId) { 
this.deptId = deptId; 
} 
} 


(2) 在 UserController 类 中 ， 添 加 一 个 select 方法 ， 并 通过 @RequestMapping 注解 实现 
映射 ， 代 码 如 下 : 


@RequestMapping (value="/select", method = RequestMethod.GET) 
public String select (Model model) { 

User user=new User(); 

user.setDeptId(3); 

model.addAttribute ("user",user); 
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return "select"; 


} 


设置 deptId 的 值 ， 页 面 上 select 下 拉 列 表 框 对 应 的 option 项 会 被 选中 。 
(3) 在 WebContent/ch08 的 路 径 下 ,新 建 selectjsp 页 面 ,并 在 页 面 中 添加 一 行 引 用 Spring 
标签 库 的 声明 ， 如 下 所 示 : 


<$%Q@ taglib prefix="fm" uri="http://www.springframework.org/tags/form"%> 
<body> 
<h3>fm: select 标签 添加 fm:option 标签 </h3> 
<fm:form modelAttribute="user" method="post" action="select"> 
部 门 : 
<fm:select path="deptId"> 
<fm:option value="1"> 机 械 工 程 学 院 </ fm: option> 
<fm:option value="2"> 电 气 工 程 学 院 </ fm: option> 
<fm:option value="3"> 信 息 工 程 学 院 </fm: option> 
<fm:option value="4"> 土 木工 程 学 院 </fm:option> 
</fm: select> 
</fm: form> 
</body> 


select.jsp 中 使 用 Spring MVC 的 selec 标签 ，path 属性 绑 定 model 的 deptId 属性 ，select 
标签 中 使 用 Spring MVC 的 option 标签 直接 添加 部 门 数据 。 由 于 被 绑 定 的 deptId 属性 的 值 是 
3， 所 以 下 拉 列 表 框 中 的 value="3" 的 信息 工程 学 院 会 被 默认 选中 。 

(4) 重启 Tomcat, 在 浏览 器 的 地 址 栏 中 访问 http:Wlocalhost8080/springmvc-3/select 网 址 
进行 测试 ， 运 行 效果 如 图 8-4 所 示 。 


- D x 
@ 国 htpyWlocalhost8080 DP - 上 | 园 测 坛 fm:select 标 符 添 .，X 
CE 


fm:select 标 签 添加 fm:option 标 签 
部 门 ， [信息 工程 学 院 Y] 


8-4 ”测试 select 标签 


selectjsp 中 使 用 了 Spring MVC 的 option 标签 直接 添加 部 门 数据 。 除 此 之 外 , 还 可 以 使 
用 select 标签 的 items 属性 自动 加 载 后 台 传递 过 来 的 数据 并 将 其 显示 在 下 拉 列 表 框 中 。 修 改 
前 面 UserController 类 中 的 select 方法 ， 如 下 所 示 : 


@RequestMapping (value="/select", method = RequestMethod.GET) 
public String select (Model model) { 

User user=new User(); 

user.setDeptId(3); 

// 页 面 展现 的 可 选择 的 select 下 拉 列 表 框 内 容 

Map<Integer, String> deptMap=new HashMap<Integer, String>(); 

deptMap.put (1， "机械 工程 学 院 ") ; 

deptMap .put (2， "电气 工程 学 院 "); 

deptMap .put (3， "信息 工程 学 院 ") ; 
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deptMap .put (4，" 土 木工 程 学 院 ") ; 
model.addAttribute ("deptMap", deptMap); 
model.addAttribute ("user",user); 
return "select"; 


} 
修改 selectjsp 页 面 ， 添 加 select 标签 的 items 属性 绑 定 Map， 如 下 所 示 : 


<fm: form modelAttribute="user" method="post" action="select"> 
i <!-- 省 略 已 运行 过 的 代码 --> 
<h3>fm: select 标签 items 属性 绑 定 Map</h3> 
部 门 : <fm: select path="deptId" items="${deptMap}"/> 
</fm: form> 
selectjsp 页 面 中 select 标签 的 items 属性 会 加 载 model 中 的 deptMap 数据 并 将 其 显示 在 
页 面 上 。 
重启 Tomcat， 在 浏览 器 的 地 址 栏 中 访问 http://localhost:8080/springmvc-3/select 网 址 进 
行 测试 ， 运 行 效果 如 图 8-5 所 示 。 


- OO x 
@ 国 hepy/localhosts080 DP- C 国 届 区 fm:select 标 答 添 | 
文件 昌 。” 韦 纺 查看 V) 收藏 次 A) 工具 中 帮助 (H) 


fm:select 标 答 items 属 性 绑 定 Map A 
部 门 ，[ 硬 各 工 程 了 碗 v] v 


图 8-5 测试 select 标签 的 items 属性 


还 可 使 用 options 标签 的 items 属性 自动 加 载 后 台 传递 过 来 的 数据 并 将 其 显示 在 下 拉 列 
表 框 中 ， 修 改 selectjsp 的 页 面 ， 添 加 代码 如 下 : 

<h3> 使 用 fm:options 标签 items 属性 绑 定 Map</h3> 

部 门 : 

<fm: select path="deptId"> 

<fm:options items="${deptMap}"/> 

</fm: select> 

重启 Tomcat， 在 浏览 器 的 地 址 栏 中 访问 http://localhost:8080/springmvc-3/select 网 址 进 
行 测试 ， 运 行 效果 如 图 8-6 所 示 。 


总 口 x 
@ 国 htpy/ocalhostao80, P - 0 | 国 测 就 fseled 村 答 测 
文件 昌 ” 编 吉 上 昌 二 看 V) 收藏 天】 工具 中 帮助 


使 用 fm:options 标 签 items 属 性 绑 定 Map A 
部 门 [信息 工程 学 院 Y v 


图 8-6 测试 options 标签 
在 实际 开发 中 , 经 常会 出 现 select 下 拉 列 表 框 中 的 数据 来 自 于 数据 库 的 表 数 据 , 并且 获 
取 的 数据 被 封装 在 JavaBean 中 。 这 时 ， 就 可 使 用 select 标签 或 者 options 标签 的 items、 
itemLabel 和 itemValue 属性 来 加 载 数 据 。 
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在 com.springmvc.entity 包 中 ， 新 建 Dept 类 ， 包 含 id 和 name 属性 ， 如 下 所 示 : 


Package com.springmvc.entity; 


Public class Dept { 
private int id; 
private String name; 
// 省 略 属性 的 setter、getter 方法 
// 省 略 构造 方法 
了 


修改 前 面 UserController 类 中 的 select 方法 ， 如 下 所 示 : 


@RequestMapping (value="/select", method = RequestMethod.GET) 
Public String select(Model model) { 
User user=new User(); 
user.setDeptId(3); 
model.addAttribute ("user",user); 
List<Dept> deptList=new ArrayList<Dept>(); 
deptList.add (new Dept (1, "机 械 工程 学 院 ") ) ; 
deptList.add (new Dept (2, "电气 工程 学 院 ") ); 
deptList.add (new Dept (3, "信息 工程 学 院 ") ); 
deptList.add (new Dept (4, "土木 工程 学 院 ") ); 
model.addAttribute ("deptList",deptList); 
return "select"; 


} 


在 select 方法 中 模拟 从 数据 库 中 获取 部 门 信 息 ， 并 将 其 封装 到 Dept 对 象 中 ， 且 将 多 个 
部 门 信息 装载 到 List 集合 对 象 中 ， 最 后 添加 到 model 中 。 

修改 selectjsp 页 面 ， 添 加 options 标签 的 items 属性 绑 定 Object， 并 使 用 itemLabel 和 
itemValue 属性 来 加 载 数据 ， 如 下 所 示 : 

<h3>fm: select 标签 使 用 fm: options 绑 定 object</h3> 

de path="deptId"> 

<fm:options items="${deptList}" itemLabel="name" itemValue="id"/> 

</fm: select> 

在 selectjsp 页 面 的 options 标签 的 items 属性 中 加 载 model 中 的 deptList, 并 将 集合 中 的 
元 素 及 Dept 对 象 的 name 属性 设置 为 option 的 label，id 属性 设置 为 option 的 value。 

重启 Tomcat， 在 浏览 器 的 地 址 栏 中 访问 http://localhost:8080/springmvc-3/select 网 址 进 
行 测试 ， 看 到 如 图 8-7 所 示 的 界面 。 


- DO x 
@ 国 hapx/localhost6080 DD -CC 国 测 区 fm:select 标 答 添 
文件 日 ”给 重唱 ” 坦 看 (JJ 收藏 夫 (A) ”工具 中 ”帮助 (H) 


fm:select 标 签 使 用 im:options 绑 定 Object 入 


部 门 ，[ 基 TS 更 ~ 


8-7 ”测试 options 标签 绑 定 对 象 
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8.2.11 ”errors 标签 


Spring MVC 的 errors 标签 对 应 于 Spring MVC 的 Errors 对 象 , 它 的 作用 就 是 显示 Errors 
对 象 中 包含 的 错误 信息 。 如 果 Errors 不 为 null， 则 会 泻 染 一 个 HTML span 元 素 ， 用 来 显示 
错误 信息 。errors 标签 除了 8.1 小 节 介绍 的 共有 属性 外 ， 还 有 delimiter 属性 ， 用 来 定义 两 个 
input 元 素 之 间 的 分 隔 符 ， 默 认 没 有 分 隔 符 。 

errors 标签 的 path 属性 绑 定 一 个 错误 信息 ， 可 通过 path 属性 显示 两 种 类 型 的 错误 信息 : 

@ ”所 有 的 错误 信息 ， 这 个 时 候 path 的 值 应 该 是 “*”。 

@ ”当前 对 象 的 某 一 个 属性 的 错误 信息 , 这 个 时 候 path 的 值 应 为 所 需 显示 的 属性 名 称 。 

下 面 我 们 通过 示例 来 演示 errors 标签 的 用 法 ， 步 又 如 下 。 

(1) 在 springmvc-3 项 目的 src 下 新 建 com.springmvc.validator 包 ， 并 在 该 包 中 新 建 
UserValidator 类 实现 org.springframework.validation.Validator 接口 ， 完 成 验证 功能 ， 如 下 
所 示 : 

package com.springmvc.validator; 

import org.springframework.validation.Errors; 

import org.springframework.validation.ValidationUtils; 

import org.springframework.validation.Validator; 

import com.springmvc.entity.User; 

public class UserValidator implements Validator { 

@Override 


public boolean supports (Class<?> clazz) { 
return User.class.equals (clazz); 


3} 

@override 

public void validate (Object object, Errors errors) { 
// 验证 User 类 中 的 name、sex 和 age 属性 是 否 为 空 
ValidationUtils.rejectIfEmpty(errors，"name"，nul1，" 用 户 名 不 能 为 空 

"ye 

ValidationUtils.rejectIfEmpty (errors,，"sex"，null, "性 别 不 能 为 空 ") ; 
ValidationUtils.rejectIfEmpty (errors，"age"，null, "年 龄 不 能 为 空 ") ; 


(2) 在 UserController 类 中 ， 使 用 @InitBinder 注解 绑 定 验证 对 象 ， 如 下 所 示 : 


@Controller 
public class UserController { 
@RequestMapping (value="/registerForm", method = RequestMethod.GET) 
public String registerForm(Model model) { 
User user=new User(); 
// 在 model 中 添加 属性 user， 值 为 user 对 象 
model.addAttribute ("user",user); 
return "registerForm"; 
} 
@InitBinder 
Public void initBinder (DataBinder binder) { 


// 设置 验证 的 类 为 UserValidator 
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binder.setValidator (new UserValidator ()) 7 


@RequestMapping (value="/registerValidator", method = 
RequestMethod.POST) 


public String registerValidator(@Validated User user,Errors errors) 
i 
// 如 果 Errors 对 象 有 Field 错误 ， 重新 跳 回 到 注册 页 面 ， 否 则 正常 提交 


if (errors.hasFieldErrors()) { 
return "registerForm"; 
} 


return "submit"™"; 
} 


(3) 复制 registerjsp 页 面 ， 重 命名 为 registerForm.jsp， 增 加 errors 标签 ， 如 下 所 示 : 
<fm: form modelAttribute="user" action="registerValidator" method="post"> 
姓名 : <fm:input path="name"/> 
<font color="red"><fm:errors path="name"/></font><br><br> 
性 别 : <fm:input path="sex"/> 
<font color="red"><fm:errors path="sex"/></font><br><br> 
年 龄 :<fm:input path="age"/> 
<font color="red"><fm:errors path="age"/></font><br><br> 
<input type="submit" value=" 注 册 "> 
</fm: form> 


在 registerForm.jsp 页 面 中 ， 在 每 个 需要 输入 的 空间 后 面 增加 了 一 个 errors 标签 ， 用 来 
显示 错误 信息 。 

(4) 重启 Tomcat, 在 浏览 器 的 地 址 栏 中 访问 http://localhost:8080/springmvc-3/registerForm 
网 址 进行 测试 。 跳 转 到 注册 页 面 ， 如 果 文 本 框 不 输入 任何 信息 ， 单 击 “ 注 册 ” 按 钮 ， 提 交 
请 求 。 因 为 没有 提交 注册 信息 ， 故 验证 出 错 。registerForm 请 求 处 理 方法 会 将 请 求 重 新 转发 
到 注册 页 面 ，errors 标签 会 显示 错误 信息 ， 如 图 8-8 所 示 。 


[<) 国 rpyVccalhost8080, 只 - C | 国 注册 
文件 昌 ”注入 (昌吉 看 WV) 收 若 夫 (A) 工具 中 考 同 (HH) 


注册 页 面 

姓名 : [用户 名 不 能 为 宝 
性 别 ， 性 别 不 能 为 空 
年 龄 ,BE | 

E; 3 


图 8-8 测试 errors 标签 
8:3 小 结 


本 章 介绍 了 Spring MVC 的 表单 标签 以 及 如 何 使 用 表单 标签 绑 定数 据 , 表单 标签 的 功能 
强大 ， 需 要 读者 好 好 掌握 。 
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Spring MVC 会 根据 请 求 方法 的 签名 不 同 ， 将 请 求 消息 中 的 信息 以 一 定 的 方式 转换 并 绑 
定 到 请 求 方法 的 参数 中 。 其 实在 请 求 信息 真正 到 达 处 理 方法 之 前 ，Spring MVC 还 完成 了 许 
多 工作 ， 包 括 数据 类 型 转换 、 数 据 格式 化 以 及 数据 校 验 等 。 


9.1 数据 绑 定 简介 


在 执行 程序 时 ，Spring MVC 会 根据 客户 端 请 求 参 数 的 不 同 ， 将 请 求 消息 中 的 信息 以 一 
定 的 方式 转换 并 绑 定 到 控制 器 类 的 方法 参数 中 。 这 种 将 请 求 消息 数据 与 后 台 方法 参数 建立 
连接 的 过 程 就 是 Spring MVC 的 数据 绑 定 。 

在 数据 绑 定 过 程 中 ，Spring MVC 框架 会 通过 数据 绑 定 的 核心 部 件 DataBinder 将 请 求 参 
数 串 的 内 容 进行 类 型 转换 ， 然 后 将 转换 后 的 值 赋 给 控制 器 类 中 方法 的 形 参 ， 这 样 
就 可 以 下 确 绪 定 间 获 让 生 帮 渍 四 全 全 数据 绑 定 涉及 几 个 主要 间 

e@ DataBinder: 数据 绑 定 的 核心 部 人 
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Spring MVC 进行 数据 绑 定 的 运行 机 制 如 图 9-1 所 示 。 


ConversionService 


ServletRequest 


总 处 理 方法 的 签名 


图 9-1 Spring MVC 数据 绑 定 机 制 

Spring MVC 数据 绑 定 信息 处 理 过 程 的 步骤 描述 如 下 。 

(1) SpringMVC 框架 将 ServletRequest 对 象 传递 给 DataBinder。 

(2) 将 处 理 方法 入 参 对 象 实例 传递 给 DataBinder。 

(3) DataBinder 调用 装配 在 SpringMVC 上 下 文中 的 ConversionService 组件 进行 数据 类 型 
转换 、 数 据 格 式 化 等 工作 ， 并 将 ServletRequest 对 象 中 的 消息 填充 到 参数 对 象 中 。 

(4) 调用 Validator 组 件 对 已 绑 定 了 请 求 消息 数据 的 参数 对 象 进行 数据 合法 性 检验 。 

(5) 检验 完成 后 会 生成 数据 绑 定 结 果 BindingResult 对 象 ，Spring MVC 会 将 
BindingResult 对 象 中 的 内 容 赋 给 处 理 方法 的 相应 参数 。 


9.2 数据 类 型 转换 


Spring 从 3.0 开 始 添加 了 一 个 位 于 org.springframework.core.convert 包 中 的 通用 类 型 转换 
模块 ， 可 以 在 Spring MVC 处 理 方法 的 参数 绑 定 中 使 用 它 进行 数据 转换 。 


9.2.1 使 用 ConversionService 进行 类 型 转换 


org.springframework.core.convert.ConversionService 是 Spring 类 型 转换 体系 的 核心 接口 ， 
在 该 接口 中 定义 了 以 下 4 个 方法 。 

@ boolean canConvert(Class<?> sourceType,Class<?> targetType): 判断 是 否 可 以 将 一 
个 Java 类 转换 成 另 一 个 Java 类 。 

@ boolean canConvert(TypeDescriptor sourceType, TypeDescriptor targetType): 需要 转 
换 的 类 将 以 成 员 变量 的 方式 出 现 ，TypeDescriptor 描述 了 需要 转换 类 的 信息 ， 还 描 
述 了 类 的 上 下 文 信息 。 

@ <T> T convert(Object source, Class<T> targetType): 将 源 类 型 对 象 转换 为 目标 类 型 
对 象 。 

@ Objectconvert(Object source, TypeDescriptor sourceType, TypeDescriptor targetType): 
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将 对 象 从 源 类 型 对 象 转换 为 目标 类 型 对 象 ， 通 常会 用 到 类 中 的 上 下 文 信息 。 

可 以 利用 org.springframework.context.support.ConversionServiceFactoryBean 在 Spring 的 
上 下 文中 定义 一 个 ConversionService， Spring 会 自动 识别 出 上 下 文中 的 ConversionService， 
并 在 Spring MVC 处 理 Bean 属性 配置 和 处 理 方法 入 参 绑 定 时 ,使 用 它 进 行 数据 转换 。 例 如 ， 
对 于 Spring MVC 中 的 前 台 form 表单 中 的 时 间 字 符 串 到 后 台 Date 数据 类 型 的 转换 问题 就 
可 以 通过 ConversionService 来 解决 。 

在 ConversionServiceFactoryBean 中 可 以 内 置 很 多 类 型 转换 器 ， 使 用 它们 可 以 完成 大 多 
数 的 Java 类 型 转换 工作 ， 可 以 通过 在 ConversionServiceFactoryBean 的 converters 属性 注册 
自 定义 的 类 型 转换 器 ， 配 置 的 实例 代码 如 下 : 


<bean id="conversionService" class="org.springframework.context. 


support.ConversionServiceFactoryBean"> 
<property name="converters"> 
<list> 
<bean class="com.springmvc.converter. 
StringToDateConverter" /> 
</list> 
</property> 
</bean> 


下 面 通过 示例 来 讲解 如 何 利用 ConversionService 进行 数据 类 型 转换 ， 有 具体 步骤 如 下 。 

(1) 将 项 目 springmvc-3 复制 并 重 命名 为 springmvc-4， 再 导入 到 Eclipse 开发 环境 中 。 
选中 springmvc-4 项 目 并 右 击 ， 在 快捷 菜单 中 选择 Properties 命令 ， 进 入 属性 设置 界面 ， 找 
到 Web Project Settings 选项 ,将 右 侧 Context Root 文本 框 中 的 springmve-3 改 为 springmvc-4， 
单 击 Apply and Close 按钮 。 删除 sre 目录 下 相关 包 下 的 User 类 ， 并 删除 UserController 类 中 
的 方法 ， 在 WebContent 下 新 建 一 个 ch09 文件 夹 ， 并 删除 ch08 文件 夹 ， 保 留 相关 jar 包 以 
及 springmvc.xml 配置 文件 。 

(2) 在 ch09 文件 夹 中 , 新 建 一 个 简单 的 注册 页 面 register.jsp, 用 其 传递 一 个 姓名 和 一 个 
用 户 的 生日 信息 ， 代 码 如 下 : 


<body> 
<h3> 注 册页 面 </h3> 
<form action="../register" method="post"> 
姓名 : <input type="text" id="name" name="name"><br><br> 
生日 : <input type="text" id="birthday" name="birthday"><br><br> 
<input id="submit" type="submit™" value=" 提 交 "> 
</form> 
</body> 


(3) 在 com.springmvc.entity 包 中 新 建 User 类 ， 代 码 如 下 : 


Package com.springmvc.entity; 
import java.util.Date; 
Public class User { 
private String name; 
private Date birthday; 
// 省 略 属性 的 setter、getter 方法 
// 省 略 构造 方法 
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User 类 提供 了 name 和 birthday 属性 ， 用 于 接收 jsp 页 面 传 入 的 数据 。 注 意 ，birthday 
属性 的 类 型 是 一 个 java.util.Date， 而 jsp 页 面 传 入 的 数据 类 型 都 是 Sting， 这 里 就 需要 将 String 


转换 成 Date 对 象 。 
(4) 在 UserController 类 中 添加 一 个 register 方法 , 并 通过 @RequestMapping 注解 进行 映 
射 ， 代 码 如 下 : 


Package com.springmvc.controller; 
import org.springframework.stereotype.Controller; 
import org.springframework.ui.Model; 
import org.springframework.web.bind.annotation.ModelAttribute; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import com.springmvc.entity.User; 
Q@Controller 
public class UserController { 
@RequestMapping (value="/register",method = RequestMethod.POST) 
public String register(@ModelAttribute User user,Model model) { 
System.out.println (user.getBirthday ()); 
model .addAttribute ("user",user); 
return "success"; 


} 


UserController 类 中 的 register 方法 只 是 简单 地 接收 请 求 数据 ， 并 将 其 设置 到 User 对 
象 中 。 

(5) 新 建 com.springmvc.converter 包 ， 并 在 其 中 新 建 StringToDateConverter 类 ， 实 现 
Converter<S,T> 接 口 ， 代 码 如 下 : 


Package com.springmvc.converter; 
import java.text.SimpleDateFormat; 
import java.util.Date; 
import org.springframework.core.convert.converter.Converter; 
public class StringToDateConverter implements Converter<String, Date>{ 
private String datePattern; // 日 期 类 型 模板 : 如 YYYY-MM-dd 
public void setDatePattern (String datePattern) { 
this.datePattern = datePattern; 
3» 
eoverride 
public Date convert (String date) { 
try { 
SimpleDateFormat dateFormat=new 
SimpleDateFormat (this.datePattern); 
return dateFormat .parse (date) ;// 将 字符 串 转换 成 Date 类 型 
}catch (Exception e) { 
e.printstackTrace (); 
system.out.println ("日 期 转换 失败 ! "); 


return null; 
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(6) 在 springmvc.xml 文件 中 加 入 将 自 定义 字符 转换 器 ， 并 添加 p 引用 ， 将 prefix 前 级 
改 为 ch09， 代 码 如 下 : 


<mvc:annotation-driven conversion-service="conversionService"/> 


<bean id="conversionService" class="org.springframework.context 
.Support .ConversionServiceFactoryBean"> 
<property name="converters"> 
<list> 
<bean class="com.springmvc.converter 
.StringToDateConverter" p:datePattern="yyyy-MM-dd"></bean> 
</list> 
</property> 
</bean> 


在 该 配置 文件 中 ， 使 用 了 <mvc:annotation-driven/> 标 签 ， 该 标签 可 简化 Spring MVC 的 
相关 配置 ， 自 动 注册 RequestMappingHandlerMapping 与 RequestMappingHandlerAdapter 两 
个 bean。<mvc:annotation-driven/> 标 签 没有 显 式 定义 时 , 会 注册 一 个 默认 的 ConversionService， 
即 FormattingconversionServiceFactoryBean， 以 满足 大 部 分 类 型 转换 的 要 求 。 现 在 需要 注册 
一 个 自 定义 的 StringToDateConverter 转换 类 ， 因 此 需要 显 式 定义 一 个 ConversionService 覆 
盖 <mvc:annotation-driven/> 中 的 默认 实现 类 ， 而 这 时 需要 通过 设置 converters 属性 来 完成 。 

在 StringToDateConverter 的 bean 装配 中 ， 将 属性 datePattern 设置 为 “yyyy-MM-dd”， 
即日 期 格式 ， 在 装配 好 这 个 ConversionService 之 后 ， 就 可 在 任何 控制 器 的 处 理 方法 中 使 用 
这 个 转换 器 了 。 

(7) 在 ch09 文件 夹 中 ， 新 建 success.jjsp 页 面 ， 实 现 输出 信息 ， 代 码 如 下 : 


姓名 : ${requestScope.user.name}<br><br> 
生日 : ${requestSscope.user.birthday} 
(8) 重启 Tomcat， 通 过 浏览 器 访问 http://localhost:8080/springmvc-4/ch09/register.jsp 网 
址 进行 浏览 ， 如 图 9-2 所 示 。 输 入 姓名 和 生日 ， 单 击 “ 提 交 ” 按 钮 ， 转 换 器 会 自动 将 输入 的 
日 期 字符 串 转换 成 Date 类 型 ， 查 看 控制 台 可 以 看 到 时 间 格式 的 输出 信息 。User 对 象 的 
birthday 属性 已 经 获得 jsp 页 面 传 入 的 日 期 值 ， 跳 转 到 success.jsp 页 面 ， 如 图 9-3 所 示 。 


- 0O x = 汪洋 

Ge 国 htpylocalhostso8o PP -|| 国 注册 @ 国 hapylocalhost8080 只 -C | | 国 日 期 格式 转换 

文件 日” 编 岛 (E) 讲 看 VW) 收 茂 夫 (工具 (帮助 () 文件 昌 ” 六 强 但 看 W。 收 训 工具 中 帮助 
姓名 :yangzho 

注册 页 面 Me 


生日 : Tue Dec 16 00:00:00 CST 2008 


姓名 ，[yangzhou 


生日 : [2008-12-16 


提交 


图 9-2 测试 ConversionService( 一 ) 9-3 ”测试 ConversionService( 二 ) 
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9.2.2 ”使 用 @InitBinder 注解 进行 类 型 转换 


Spring MVC 默认 不 支持 自动 转换 表单 中 的 日 期 字符 串 和 实体 类 中 的 日 期 类 型 的 属性 ， 
必须 要 手动 配置 ， 上 一 小 节 讲解 了 使 用 ConversionService 进行 类 型 转换 ， 通 过 自 定义 数据 
类 型 的 绑 定 实现 这 个 功能 。 本 节 通 过 Spring MVC 的 注解 @InitBinder 和 Spring 自 带 的 
WebDataBinder 类 来 实现 这 一 类 型 转换 ， 具 体 步 又 如 下 。 

(1) 在 实体 类 User.java 不 进行 修改 ， 还 是 使 用 日 期 型 属性 birthday。 

(2) 在 UserController 类 中 添加 initBinder 方法 ， 并 用 @InitBinder 注解 标识 ， 将 从 表单 
获取 的 字符 串 类 型 的 日 期 转换 成 Date 类 型 。 


@InitBinder 

public void initBinder (WebDataBinder binder) { 
SimpleDateFormat dateFormat = new SimpleDateFormat ("yyyy-MM-dd"); 
binder.registerCustomEditor (Date.class, new 

CustomDateEditor (dateFormat, true)); 


} 


@InitBinder 注解 标识 的 方法 可 以 对 WebDataBinder 对 象 进行 初始 化 ， 用 于 完成 从 表单 
文本 域 到 实体 类 属性 的 绑 定 。@InitBinder 标识 的 方法 不 能 有 返回 值 ， 必 须 声 明 为 void。 
@InitBinder 标识 的 方法 的 参数 为 WebDataBinder， 是 DataBinder 的 子 类 。DataBinder 是 数 
据 绑 定 的 核心 部 件 ， 可 用 来 进行 数据 类 型 转换 、 格 式 化 以 及 数据 校 验 。 

(3) 在 UserController 类 中 添加 方法 testInitBinder, 用 于 测试 日 期 类 型 转换 , 并 在 控制 台 
打印 输入 姓名 和 生日 ， 如 下 所 示 : 

@RequestMapping (value="/testInitBinder") 

public String testInitBinder (User userl,Model model) { 

System.out.println ("姓名 : "+userl.getName ()); 
System.out.println(" 生 日 : "+userl .getBirthday ()); 
model.addAttribute ("userl",userl1); 


return "successl"; 


} 
(4) 新 建 registerl.jjsp 页 面 ， 与 前 面 的 registerjsp 页 面 类 似 ， 如 下 所 示 : 


<form action="../testInitBinder" method="post"> 
姓名 : <input type="text" id="name" name="name"><br><br> 
生日 : <input type="text" id="birthday" name="birthday"><br><br> 
<input id="submit" type="submit" value=" 提 交 "><br> 

</form> 


(5) 在 ch09 文件 夹 中 ， 新 建 success1.jsp 页 面 ， 实 现 信息 输出 ， 如 下 所 示 : 
使 用 8InitBinder 注解 进行 类 型 转换 之 后 的 跳 转 页 面 <br><br> 


姓名 : ${requestscope.userl.name }<br><br> 
生日 : ${requestSscope.userl.birthday }<br><br> 


(6) 重启 Tomcat, 访问 http://localhost:8080/springmvc-4/ch09/registerl.jsp 地 址 , 在 表单 
中 输入 姓名 “nanjing” 和 字符 串 类 型 日 期 “2018-07-11”， 单 击 “提交 ”按钮 ， 控 制 台 输 出 
实体 对 象 userl 中 的 name 属性 和 birthday 属性 值 ， 如 下 所 示 : 


@< a a a ea 
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姓名 : nanjing 
生日 : Wed Jul 11 00:00:00 CsT 2018 


1 


浏览 器 的 地 址 栏 变 为 http://localhost:8080/springmve-4/testInitBinder， 页 面 显示 
successl .jsp 中 的 内 容 ， 如 图 9-4 所 示 。 


- ODO x 
@ hupy//localhost3080, D = © | Insert tite here 
文件 昌 篇 纺 (EB) 查看 (WV) 收藏 交 A) 工具 (D 帮助 (H) 
使 用 @InitBinder 注 解 进行 类 型 转换 之 后 的 跳 转 页 面 
姓名 :nanjing 
生日 ，Wed Jul 11 00:00:00 CST 2018 


9-4 ”测试 @InitBinder 注解 


每 次 请 求 都 会 先 调用 @InitBinder 注解 标识 的 方法 ， 然 后 再 调用 控制 器 类 中 处 理 请 求 的 
方法 。 

对 于 同一 个 类 型 的 对 象 来 说 ， 如 果 既 在 ConversionService 中 装配 了 自 定义 的 转换 器 ， 
同时 还 在 控制 器 中 通过 @InitBinder 装配 了 自 定义 的 编辑 器 ， 则 Spring MVC 将 先 查询 通过 
@InitBinder 装配 的 自 定义 编辑 器 ,然后 再 查询 通过 ConversionService 装配 的 自 定义 转换 器 。 


9.3 数据 格式 化 


除了 可 以 使 用 ConversionService 和 @InitBinder 注解 实现 数据 类 型 的 转换 外 ， 还 可 通过 
在 实体 类 的 属性 上 添加 相应 的 注解 来 实现 数据 的 格式 化 。 在 实体 类 User 的 birthday 属性 上 
标识 @DateTimeFormat 注解 ， 如 下 所 示 : 


import org.springframework.format.annotation.DateTimeFormat; 


@DateTimeFormat (pattern="yyyy-MM-dd") 

private Date birthday; 

@DateTimeFormat 可 将 表单 中 输入 的 形 如 “yyyy-MM-dd” 的 日 期 字符 串 格式 化 为 Date 
类 型 的 数据 。 

将 UserController 类 中 用 @InitBinder 注解 标识 的 initBinder0 方 法 注释 掉 ， 重启 Tomcat， 
浏览 页 面 ch09/register1.jsp， 在 表单 中 输入 姓名 和 字符 串 类 型 日 期 “2018-07-11”, 单 击 “ 提 
交 ” 按 钮 ， 控 制 台 依然 会 成 功 输出 实体 对 象 userl 中 的 name 和 birthday 属性 值 。 

如 果 在 Float 类 型 属性 上 使 用 @NumberFormat(pattern="#. 失 #. 挫 ##") 注 解 ， 则 将 表单 中 
输入 的 形 如 “1,234,567.8” 的 字符 串 格式 化 为 Float 类 型 的 数据 。 


94 数据 校 验 


在 实际 工作 中 ， 得 到 数据 后 的 第 一 步 就 是 校 验 数据 的 正确 性 ， 如 果 存 在 录入 上 的 问题 ， 
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一 般 会 通过 注解 校 验 ， 发 现 错误 后 返回 给 用 户 ， 但 是 对 于 一 些 逻 辑 上 的 错误 ， 比 如 购买 金 
额 = 购 买 数 量 X 单 价 , 这 样 的 规则 就 很 难 使 用 注解 方式 进行 验证 了 , 此 时 可 以 使 用 Spring 提 
供 的 验证 器 (Validator) 规 则 去 验证 ， 在 上 一 章 的 Spring MVC 的 errors 标签 中 已 经 演示 过 
Validator 验证 。 由 于 Validator 框架 通过 硬 编码 完成 数据 校 验 ， 在 实际 开发 中 会 显得 比较 麻 
烦 ， 因 此 现在 开发 更 加 推荐 使 用 JSR 303 完成 服务 器 端的 数据 校 验 。 

Spring 3 开始 支持 JSR 303 验证 框架 ，JSR 303 是 Java 为 Bean 数据 合法 性 校 验 所 提供 
的 标准 框架 。 JSR 303 支持 XML 风格 的 和 注解 风格 的 验证 , 通过 在 Bean 属性 上 标注 类 似 于 
@NotNull、@Max 等 的 标准 注解 指定 校 验 规则 ， 并 通过 标准 的 验证 接口 对 Bean 进行 验证 。 
访问 http://jcp.org/en/jsr/detail?id=303 可 以 查看 详细 内 容 并 下 载 JSR 303 Bean Validation。JSR 
303 不 需要 编写 验证 器 ， 它 定义 了 一 套 可 标注 在 成 员 变 量 、 属 性 方法 上 的 校 验 注 解 ， 如 
表 9-1 所 示 。 


表 9-1 JSR 303 注解 约束 


约 _ 束 说 明 

Null 被 注解 的 元 素 必 须 为 Null 
@NotNull 被 注解 的 元 素 必须 不 为 Null 
@AssertTrue 被 注解 的 元 素 必须 为 rue 
@AssertFalse 被 注解 的 元 素 必须 为 false 
@Min(value) 被 注解 的 元 素 必须 是 一 个 数字 ， 其 值 必 须 大 于 等 于 最 小 值 
@Max(value) 被 注解 的 元 素 必须 是 一 个 数字 ， 其 值 必须 小 于 等 于 最 大 值 
@DecimalMin(value) 被 注解 的 元 素 必须 是 一 个 数字 ， 其 值 必须 大 于 等 于 最 小 值 
@DecimalMax(value) 被 注解 的 元 素 必须 是 一 个 数字 ， 其 值 必须 小 于 等 于 最 大 值 


@Size(max.min) 被 注解 的 元 素 的 大 小 必须 在 指定 的 范围 内 
Digits(integer.fraction 被 注解 的 元 素 必 须 是 一 个 数字 ， 其 值 必须 在 可 接受 范围 内 


@Future 被 注解 的 元 素 必须 是 一 个 将 来 的 日 期 
@Pattem(value) 被 注解 的 元 素 必须 符合 指定 的 正则 表达 式 


Hibernate Validator 是 JSR 303 的 一 个 参考 实现 ， 除 了 支持 所 有 标准 的 校 验 注解 之 外 ， 
还 扩展 了 如 表 9-2 所 示 的 注解 。 


表 9-2 Hibernate Validator 扩展 的 注解 


约束 说 明 
CNotBlank 检查 被 注解 的 元 素 是 不 是 Null， 以 及 被 去 掉 前 后 空格 的 长 度 是 否 大 于 0 
@Email 被 注解 的 元 素 必须 是 电子 邮件 格式 

URL 被 注解 的 元 素 必须 是 合法 的 URL 地 址 
@length 被 注解 的 字符 串 的 大 小 必须 在 指定 的 范围 内 
@NotEmpty 检查 被 注解 的 字符 囊 必须 非 空 

Range 被 注解 的 元 素 必须 在 合适 的 范围 内 
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Spring MVC 支持 JSR 303 标准 的 验证 框架 ，Spring 的 DateBinder 在 进行 数据 绑 定时 ， 
可 同时 调用 验证 框架 来 完成 数据 校 验 工作 ， 非 常 方 便 。 在 Spring MVC 中 ， 可 以 直接 通过 注 
解 驱动 的 方式 来 进行 数据 校 验 。 
下 面 通过 在 注册 页 面 中 增加 用 户 时 , 添加 JSR 303 验证 来 介绍 , 本 例 使 用 的 是 Hibernate 
Validator 的 实现 ， 目 前 最 高 版 本 是 6， 步骤 如 下 。 
(1) 下 载 添加 验证 jar 包 。 
访问 网 址 http:/bibernate.org/validator/， 即 可 在 页 面 上 看 到 一 个 绿色 的 Latest stable(6.0) 
按钮 ， 单 击 该 按钮 跳 转 到 http://hibernate.org/validator/releases/6.0/ 页 面 ， 在 Releases in this 
series 下 方 看 到 绿色 底 纹 的 “6.0.10.Final”， 单 击 右 侧 的 Download 下 载 链接 ， 跳 转 到 
https://sourceforge.net/ 网 站 下 载 hibernate-validator-6.0.10.Final-dist.zip 压缩 包 。 解 压 该 压缩 
包 ， 将 dist 文件 夹 中 的 hibernate-validator-6.0.10.Finaljar， 以 及 \dist\librequired\ 路 径 下 的 
validation-api-2.0.1.Final.jar、jboss-logging-3.3.2.Final.jar 和 classmate-1.3.4.jar 共 四 个 jar 包 ， 
复制 到 springmvc-4 项 目的 WebContentWEB-INFWlib 目录 下 ， 刷 新 该 项 目 。 
(2) 在 Spring MVC 配置 文件 中 添加 对 JSR 303 验证 框架 的 支持 。 
由 于 在 Spring MVC 配置 文件 springmvc.xml 中 已 经 使 用 了 <mvc:annotation-driven>， 因 
此 会 自动 注册 JSR 303 验证 框架 。 
(3) 使 用 JSR 303 验证 框架 注解 为 模型 对 象 指定 验证 信息 。 
修改 实体 类 User.java， 添 加 email 属性 及 其 getter 和 setter 方法 ， 再 使 用 JSR 303 验证 
框架 注解 为 这 些 属性 指定 验证 信息 ， 如 下 所 示 : 
Package com.springmvc.entity; 
import javax.validation.constraints.Email; 
import javax.validation.constraints.NotEmpty; 
import javax.validation.constraints.Size; 
import org.hibernate.validator.constraints.Range; 
public class User { 
@NotEmpty 
Qsize (min=6,max=20) 
private String name; 
@Range (min = 18, max = 45) 
private int age; 
@Email 
@NotEmpty 


private String email; 


// 省 略 属性 的 setter、getter 方法 


} 


对 于 name 属性 ， 要 求 不 为 空 ， 其 长 度 不 小 于 6， 且 不 大 于 20; 对 于 email 属性 ， 要 求 
不 为 空 ， 且 格式 为 email; 对 于 age 属性 ， 要 求 输入 的 年 龄 范围 在 18 岁 到 45 岁 之 间 。 
(4) 在 UserController 类 中 添加 方法 testValidate0， 测 试 表单 数据 校 验 ， 如 下 所 示 : 
@RequestMapping("/testValidate") 
public String testValidate (eValid User user, BindingResult result) { 


if (result.getErrorCount() > 0) { 
for (FieldError error : result.getFieldErrors()) { 
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System.out.println(error.getField() + ":"+ 


error.getDefaultMessage()); 
} 
， 


return "index"; 


} 


在 testValidate 方法 中 ， 通 过 @Valid 注解 告诉 Spring MVC，User 类 的 对 象 user 在 绑 定 
表单 数据 后 需要 进行 JSR 303 验证 ， 绑 定 的 结果 保存 到 BindingResult 类 型 的 对 象 result 中 。 
通过 判断 result 就 可 以 知道 绑 定 过 程 是 否 出 现 错误 ， 如 果 出 现 错误 则 输出 。 

(5) 在 ch09 文件 夹 中 ， 新 建 index.jsp 页 面 ， 在 页 面 中 创建 一 个 表单 ， 如 下 所 示 : 

<form action="../testValidate" method="post"> 

姓名 : <input type="text" name="name"><br><br> 
年 龄 : <input type="text" name="age"><br><br> 
邮箱 : <input type="text" name="email"><br><br> 
<input type="submit"” value=" 提 交 " /> 

</form> 

(6) 重启 Tomcat， 浏 览 页 面 http://localhost:8080/springmvc-4/ch09/index.jsp， 在 表单 页 
面 中 的 年 龄 和 邮箱 处 填 入 “10” 和 “yz”， 单 击 “提交 ”按钮 ， 如 图 9-5 所 示 。 


lg 口 X 
国 hapyVjlocalhost8080 人 DC 网)SR 303 
DD DO TD 
Ma | 


9-5 测试 JSR 303 


控制 台 输出 如 下 校 验 错误 信息 : 


name :不 能 为 空 

age: 需 要 在 18 和 45 之 间 

email :不 是 一 个 合法 的 电子 邮件 地 址 
name :个 数 必须 在 6 和 20 之 间 


只 有 表单 输入 信息 满足 所 有 校 验 要 求 ， 控 制 台 才 不 会 输出 错误 信息 。 
9.5 小 结 


本 章 介绍 了 Spring MVC 的 数据 类 型 转换 、 数 据 格式 化 和 数据 校 验 。 对 于 类 型 转换 ， 讲 
解 了 使 用 ConversionService 进行 类 型 转换 和 使 用 @InitBinder 注解 进行 类 型 转换 ， 对 于 数据 
格式 化 ， 讲 解 了 使 用 注解 来 实现 数据 的 格式 化 。 对 于 数据 校 验 ， 讲 解 了 通过 注解 来 实现 信 
息 输出 ， 现 阶段 更 多 的 是 使 用 JSR 303 验证 规范 。 
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在 当前 互联 网 应 用 中 ， 上 传 头像 、 图 片 、 证 件 和 相关 文件 等 是 十 分 常见 的 ， 这 就 涉及 
到 文件 的 上 传 功能 ， 当 然 我 们 有 时 也 需要 在 网 上 下 载 相关 资源 。 文 件 上 传 和 下 载 是 项 目 中 
常用 的 功能 。Spring MVC 为 文件 的 上 传 和 下 载 提供 了 良好 的 支持 ， 本 章 将 对 Spring MVC 
环境 中 文件 的 上 传 和 下 载 进行 讲解 。 


10.19 人 件 昌 上传 


在 Spring MVC 中 实现 文件 上 传 十 分 方便 ， 它 为 文件 上 传 提 供 了 直接 的 支持 ， 即 
MultipartResolver( 多 部 件 解析 器 ) 接 口 。MultipartResolver 用 于 处 理 上 传 请 求 ， 将 上 传 请 求 包 
装 成 可 以 直接 获取 文件 的 数据 ， 从 而 方便 操作 。 它 有 两 个 实现 类 : 

®@ ”StandardServletMultipartResolver: 它 是 Spring 3.1 版 本 后 的 产物 ， 使 用 Servlet 3.0 

标准 的 上 传 方式 ， 不 用 依赖 于 第 三 方 包 。 
Co 使 用 了 Apache 的 


Spring + Spring MVC + MyBatis 
框架 技术 精 讲 与 整合 案例 


10.1.1 单 文件 上 传 


下 面 使 用 CommonsMultipartResolver 实现 单 文件 的 上 传 功能 ， 具 体 流程 如 下 。 

(1) 将 项 目 springmvc-4 复制 并 重 命 名 为 springmvc-5， 再 导入 到 Eclipse 开发 环境 中 。 
选中 springmvc-5 项 目 并 右 击 ， 在 快捷 菜单 中 选择 Properties 命令 ， 进 入 属性 设置 界面 ， 找 
到 Web Project Settings 选项 ,将 右 侧 Context Root 文本 框 中 的 Springmvc-4 改 为 springmvc-S， 
单 击 Apply and Close 按钮 。 删 除 src 目录 下 相关 包 下 的 类 ， 在 WebContent 下 新 建 一 个 ch10 
文件 夹 ， 并 删除 ch09 文件 夹 ， 保 留 相关 jar 包 以 及 springmvc.xml 配置 文件 。 

(2) 下 载 并 添加 jar 包 ， 访问 http://commons.apache.org/proper/ 网 址 ， 进 入 后 找到 
commons-fileupload 和 commons-io 进行 下 载 ， 得 到 commons-fileupload-1.3.3.jar 和 
commons-io-2.6.jar( 也 可 直接 使 用 提供 的 jar 包 ) 两 个 jar 包 ， 复 制 到 项 目 springmve-5 的 
WebContent\WEB-INF\ib 目录 下 ， 并 刷新 项 目 发 布 到 Libraries 路 径 下 。 

(3) 在 Spring MVC 配置 文件 中 配置 CommonsMultipartResolver 类 ， 如 下 所 示 : 


<bean id="multipartResolver" class="org.springframework.web 


.multipart.commons.CommonsMultipartResolver"> 
<!-- 设置 上 传 文件 的 最 大 尺寸 为 1MB --> 
<property name="maxUploadSize" value="1048576" /> 
<!-- 字符 编码 --> 
<property name="defaultEncoding" value="UTF-8" /> 

</bean> 

Spring MVC 环境 所 需要 的 组 件 扫描 器 、 注 解 驱动 和 视图 解析 器 以 前 已 经 配置 。 
MultipartResolver 接口 的 实现 类 CommonsMultipartResolver 是 引用 multipartResolver 字符 串 
获取 该 实现 类 对 象 并 完成 文件 解析 的 ， 所 以 在 配置 CommonsMultipartResolver 时 必须 指定 
该 Bean 的 id 为 multipartResolver。 

在 上 述 配 置 代码 中 ， 除 配置 了 CommonsMmultipartResolver 类 外 ,还 通过 <property> 元 素 
配置 了 允许 上 传 文件 的 大 小 和 编码 格式 。 通 过 <property> 元 素 可 以 对 文件 解析 器 类 
CommonsMultipartResolver 的 如 下 属性 进行 配置 。 

@ maxUploadSize: 上 传 文件 的 最 大 长 度 ， 长 度 以 字 节 为 单位 。 

@ maxInMemorySize: 缓存 中 的 最 大 尺寸 。 

@ defaultEncoding: 默认 的 字符 编码 格式 。 

@ resolveLazily: 延迟 文件 解析 ， 以 便 在 Controller 中 捕获 文件 大 小 异常 。 

(4) 在 ch10 文 件 夹 中 新 建 ndex.jsp 页 面 ， 并 在 该 页 面 上 创建 一 个 表单 , 用 于 上 传 文件 。 
提交 表单 后 ， 以 POST 方式 提交 到 一 个 名 为 “/fileUpload” 的 请 求 中 ， 如 下 所 示 : 

<form action="../fileUpload" method="post" enctype="multipart/form-data"> 

<input type="file" name="file" /><br><br> 
<input type="submit" value=" 上 传 " /><br> 

</form> 

新 建 success.jsp 页 面 ， 如 下 所 示 : 

文件 上 传 成 功 ! <br> 
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上 传 文件 路 径 : ${requestscope.fileUrl } 


(5) 在 com.springmvc.controller 包 中 ， 新 建 FileUploadController 类 ， 并 在 其 中 添加 方法 


fileUpload， 处 理 文件 上 传 ， 如 下 所 示 : 


Package com.springmvc.controller; 


import 
import 
import 
import 
import 
import 
import 


java.io.File; 
javax.servlet.http.HttpServletRequest; 


org. 


org 


org. 
org. 


org 


springframework.stereotype.Controller; 
.springframework.ui.ModelMap; 
springframework.web.bind.annotation.RequestMapping; 
springframework.web.bind.annotation.RequestParam; 


.springframework.web.multipart.MultipartFile; 


Q@Controller 
public class FileUploadController { 
@RequestMapping (value = "/fileUpload") 


public String fileUpload (@RequestParam(value="file", required=false) 


MultipartFile file, HttpServletRequest request, ModelMap model) 


request.getSession() .getServletContext () .getRealPath ("upload"); 


model.put ("fileUrl", request.getContextPath()+"/upload/"+fileName); 


} 
} 


在 FileUpload 方法 参数 中 ，@RequestParam 注解 用 于 在 控制 器 FileUploadController 中 
绑 定 请 求 参数 到 方法 参数 。 请 求 参数 为 file, 将 indexjsp 页 面 文件 上 传 表单 中 名 为 file 的 value 
“required=false ”表示 使 用 @RequestParam 注解 可 以 
不 传 file 参数 ， 如 果 “required=tue” 时 则 必须 传递 该 参数 ，required 的 默认 值 是 true。 

Spring MVC 会 将 上 传 的 文件 绑 定 到 MultipartFile 对 象 中 .MultipartFile 提供 了 获取 上 传 
文件 内 容 、 文 件 名 等 方法 。 通 过 transferTo() 方 法 还 可 以 将 文件 存储 到 硬件 中 。MnultipartFile 


值 赋 给 MultipartFile 类 型 的 file 属性 ; 


// 服 务 器 端 upload 文件 夹 物理 路 径 


String path = 


// 获 取 文 件 名 
String fileName = file.getOriginalFilename(); 
// 实 例 化 一 个 File 对 象 ， 表 示 目 标 文件 ( 含 物理 路 径 ) 


File targetFile = new Filel(path, fileName); 


if( 


} 
Ley 


!targetFile.exists())1{ 
targetFile.mkdirs(); 


{ 
// 将 上 传 文件 保存 到 服务 器 上 指定 位 置 


file.transferTo (targetFile); 


} catch (Exception e) { 


} 


e.printstackTrace (); 


return "success"; 


对 象 中 的 常用 方法 如 下 。 
@ byte[] getBytes0: 获取 文件 数据 。 
@ String getContentType[]: 获取 文件 MIME 类 型 ， 如 image/jpeg 等 。 
@ InputStream getInputStream(): 获取 文件 流 。 
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String getName0: 获取 表单 中 文件 组 件 的 名 字 。 

String getOriginalFilename(): 获取 上 传 文件 的 原名 。 

Long getSize(): 获取 文件 的 字 节 大 小 ， 单 位 为 byte。 

boolean isEmptyO: 确定 是 否 有 上 传 文件 。 

void transferTo(File dest): 将 上 传 文件 保存 到 一 个 目录 文件 中 。 

(6) 部 署 springmvc-5, 启动 Tomcat, 浏览 http:Wlocalhost:8080/springmvc-S/ch10/index.jsp 
页 面 ， 在 文件 上 传 表单 中 先 通过 “浏览 ”按钮 选择 一 个 文件 ， 然 后 单 击 “ 上 传 ” 按 钮 ， 如 
图 10-1 所 示 。 

文件 成 功 上 传 后 ,在 Tomcat 的 根 路 径 \webapps\springmvc-5\upload 下 就 能 看 到 上 传 的 文 
件 。success.jsp 页 面 显 示 的 文件 路 径 如 图 10-2 所 示 。 


= 口 X 
@ 国 httpi//localhost3080, PD- 0 | 国 Inserttite 
文件 昌 。” 妨 铝 (E) ” 训 看 (V) 收藏 夫 (A) 工具 中 帮助 (H) 


- DO x 
国 http://localhost8080, DC | 国文 件 上 传 
文件 日 ”编辑 (E) ”可 看 V) ”收藏 夫 (A) 工具 CD 帮助 (H) 


DoTjpg 浏览。 文 1 
下 上 传 文件 路 径 ，/springmvc-5/upload/01jpg 
图 10-1 文件 上 传 图 10-2 文件 上 传 后 的 路 径 


注意 : upload 文件 夹 在 项 目的 发 布 路 径 中 ， 而 不 是 创建 的 项 目 所 在 目录 ， 本 书 在 第 1 章 已 
经 将 项 目的 发 布 路 径 修改 为 Tomcat 的 webapps 目录 。 如 果 未 更 改 项 目的 发 布 路 
径 ， 则 要 到 工作 空间 的 .metadata 目录 中 寻找 项 目 发 布 目 录 ( 路 径 为 
workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmpl\wtpwebapps\) 下 找到 相应 
项 目 中 的 upload 文件 夹 。 


10.1.2 ”多 文件 上 传 


如 果 想 通过 浏览 文件 一 次 选择 多 个 文件 上 传 ， 可 以 将 方法 参数 中 的 参数 设置 为 
@RequestParam("files") MultipartFile[] files 数组 形式 ， 这 样 可 提交 多 个 文件 ， 如 下 所 示 : 

@RequestMapping (value = "/fileUpload") 

public String fileUpload (@Regquestparam("files") Maultiparteile[] files 


HttpServletRequest request, ModelMap model) { 
// 利用 数组 的 方式 来 处 理 多 个 文件 ， 处 理 过 程 略 


} 

随 着 HTML 5 的 广泛 应 用 ， 可 利用 HTML 5 的 特性 ， 一 次 性 选择 多 张 图 片 的 选择 方式 
以 前 端 设计 为 主 。 下 面 来 介绍 用 HTML 5 的 方式 实现 多 文件 上 传 ， 过 程 如 下 。 

(1) 在 springmvc-5 项 目的 ch10 文件 夹 中 ， 新 建 fleUpload.jsp 页 面 ， 代 码 如 下 : 


<%@ page language="java" contentType="text/html; charset=UTF-8" 


pageEncoding="UTF-8"%> 
<!DOCTYPE HTML> 
<html> 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title> 文 件 上 传 </title> 
</head> 
<body> 
<form action="../upload" method="post" enctype="multipart/form-data"> 
文件 描述 : <input type="text" name="description"><br><br> 
请 选择 文件 <input type="file" name="files" ML0Iple "malteiple/> 
<br><br> 
<input type="submit" value=" 上 传 " /><br> 
</form> 
</body> 
</html> 


上 述 代码 中 ， 首 先 使 用 <!DOCTYPE HTML> 声 明 HTML 5 标准 网 页 。 在 表单 中 ， 除 了 
满足 上 传 表单 所 必需 的 条 件 外 ， 在 类 型 为 file 的 <input> 元 素 中 还 增加 了 一 个 multiple 属性 ， 
该 属性 为 HTML 中 的 新 属性 ， 使 用 该 属性 ， 就 可 以 同时 选择 多 个 文件 进行 上 传 。 

新 建 errorjsp 页 面 ， 在 <body> 元 素 内 编写 “文件 上 传 失败 ， 请 重新 上 传 ! ”的 提示 
信息 。 

(2) 在 控制 器 类 FileUploadController 中 添加 upload0 方 法 ， 如 下 所 示 : 

import java.util.List; 


import java.util.UUID; 


@RequestMapping (value = "/upload") 

public String upload (@RequestParam("description") String description, 
@RequestParam (value="files", required=false) List<MultipartFile> 
files,HttpServletRequest request) { 


// 判 断 上 传 文件 是 否 存在 
if (!files.isEmpty() && files.size()>0 ) { 
// 循 环 输出 上 传 的 文件 
for (MultipartFile file : files) { 
// 获 取 上 传 文件 的 原始 名 称 
String originalFilename=file.getOriginalFilename (); 
// 设 置 上 传 文件 的 保存 地 址 目录 


String dirPath=request .getServletContext (). getRealPath("/upload/"); 
File filePath=new File(dirPath); 
// 如 果 保存 文件 的 地 址 不 存在 ， 就 先 创建 目录 
if (!filePath.exists()) { 
filePath.mkdirs(); 


} 
// 使 用 UUID 重新 命名 上 传 的 文件 名 称 (文件 描述 _uuid_ 原始 文件 名 称 ) 
String newFileName= description+" "+UUID.randomUUID()+"_" 
+originalFilename; 
try { 
// 使 用 MultipartFile 接口 的 方法 将 文件 上 传 到 指定 位 置 
file.transferTo (new File(dirPath+newFileName)); 
} catch (Exception e) { 
e.printstackTrace (); 
return "error™; 
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} 


} 
// 跳 转 到 成 功 页面 
return "success"; 
}else { 
return "error"7 
. 
} 


在 upload 方法 参数 中 ， 使 用 List<MultipartFile> 集 合 类 型 接收 用 户 上 传 的 文件 ， 然 后 判 
断 上 传 文件 是 否 存在 。 如 果 存在 , 则 继续 执行 上 传 操作 , 用 MultipartFile 接口 的 transferTo0 
方法 将 上 传 文件 保存 到 用 户 指定 的 目录 位 置 后 ， 会 跳 转 到 success.jsp 页 面 ， 如 果 文 件 不 存 
在 或 上 传 失败 ， 则 跳 转 到 errorjsp 页 面 。 

(3) 重启 Tomcat， 浏 览 http:Wlocalhost:8080/springmvc-S/ch10/fileUpload.jsp 网 址 ， 其 显 
示 效 果 如 图 10-3 所 示 。 


- OO x 
@ 国 htpi//localhost8080, PD - C | 国 多 文件 上 传 
文件 昌 ”编辑 (E) ”前 看 (V) ”收藏 夫 (A) 工具 中 帮助 (H) 
文件 描述 ，[Spring 


请 选择 文件 DiWio1jpg, D:W02jpg 浏览 


上 和 传 


图 10-3 upload.jsp 多 文件 上 传 页 面 


在 文件 上 传 页 面 中 ， 填 入 文件 描述 “Spring”， 单 击 “ 浏 览 ”按钮 ， 选 择 所 要 上 传 的 文 
件 。 单 击 “ 上 传 ” 按 钮 ， 程 序 正 确 执行 后 浏览 器 就 会 跳 转 到 success.jsp 页 面 ， 查 看 项 目 发 布 
目录 ， 即 可 在 springmvc-5 项 目 中 出 现 一 个 upload 文件 夹 ， 该 文件 夹 的 内 容 如 图 10-4 所 示 。 

从 图 10-4 可 以 看 出 ， 已 经 成 功 上 传 了 两 张 图 片 ， 图 片 文件 的 命名 规则 为 “文件 描 
述 _UUID 原始 文件 名 称 ” 的 形式 。 


Program Files ，apache-tomcat-9.0.4 » webapps ，springmvc-5 » upload 
名 称 日 期 


丽 Spring_ 114c15a6-15d5-405a-81d5-2cd597fof191 01jpg 
函 Spring_a198a9fd-99bd-41c9-8174-14732d8f7902 02jpg 


10-4 上传 后 的 upload 文件 夹 


10.2 文件 下 载 


文件 下 载 就 是 将 文件 服务 器 中 的 文件 下 载 到 本 机 ， 操 作 相对 比较 简单 ， 直 接 在 页 面 给 
出 一 个 超 链 接 ， 该 链接 的 href 属性 等 于 要 下 载 文件 的 文件 名 ， 就 可 以 实现 文件 下 载 了 。 但 
是 如 果 该 文件 的 文件 名 为 中 文 ， 在 某 些 早期 的 浏览 器 上 就 会 导致 下 载 失败 ; 如果 使 用 最 新 
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的 Firefox、Chrome 等 浏览 器 则 可 以 正常 下 载 文件 名 为 中 文 的 文件 。 

修改 10.1.1 小 节 中 单 文件 上 传 的 示例 ， 实 现 文件 下 载 ， 操 作 步 骤 如 下 。 

(1) 修改 FileUploadController 类 中 的 fleUpload0 方 法 ， 将 获得 的 名 eName 文件 名 封装 
到 model 中 ， 这 样 便于 在 success.jsp 页 面 得 到 文件 名 ， 代 码 如 下 : 


model.put ("fileName", fileName); 


(2) 修改 success.jsp 页 面 , 添加 一 个 文件 下 载 的 超 链 接 ， 该 链接 的 href 属性 要 指定 后 台 
文件 下 载 的 方法 及 文件 名 (这 里 就 用 我 们 上 传 的 文件 名 )， 代 码 如 下 : 


文件 上 传 成 功 ! <br> 

上 传 文件 路 径 : ${requestscope.fileUrl}<br> 

<a href="fileDownload?fileName=$ {requestSscope.fileName}"> 
${requestSscope.fileName} 

</a> 


(3) 在 后 台 FileUploadController 类 中 ， 添 加 一 个 包 eDownload0 方 法 ， 并 进行 相应 的 映 
射 ， 使 用 Spring MVC 提供 的 文件 下 载 方法 进行 文件 下 载 。Spring MVC 提供 了 一 个 
ResponseEntity 类 型 的 对 象 ， 使 用 它 可 以 很 方便 地 定义 返回 的 HttpHeaders 对 象 和 HttpStatus 
对 象 ， 通 过 对 这 两 个 对 象 的 设置 ， 即 可 完成 下 载 文件 时 所 需要 的 配置 信息 。 代 码 如 下 : 


import org.apache.commons.io.FileUtils; 

import org.springframework.http.HttpHeaders; 

import org.springframework.http.HttpSstatus; 

import org.springframework.http.MediaType; 

import org.springframework.http.ResponseEntity; 

import org.springframework.ui.Model; 

@RequestMapping (value="/fileDownload") 

public ResponseEntity<byte[]> fileDownload(HttpServletRequest request, 
@RequestParam("fileName") String fileName,Model model)throws Exception { 


// 下 载 文件 路 径 

String path = request.getServletContext () .getRealPath ("/upload/"); 
// 创 建文 件 对 象 

File file = new File(path + File.separator + fileName); 

// 设 置 响应 头 


HttpHeaders headers = new HttpHeaders (); 
// 下 载 显 示 的 文件 名 ， 解 决 中 文 名 称 乱码 问题 
String downloadFileName = new 
String (fileName .getBytes ("UTF-8"),"ISO-8859-1"); 
// 通 知 浏览 器 以 下 载 方式 (attachment) 打开 文件 
headers.setContentDispositionFormData("attachment", 
downloadFileName); 
// 定 义 以 二 进 制 流 数据 (最 常见 的 文件 下 载 ) 的 形式 下 载 返回 文件 数据 
headers.setContentType (MediaType .APPLICATION OCTET STREAM); 
// 使 用 spring MVcC 框架 的 ResponseEntity 对 象 封装 返回 下 载 数 据 
return new ResponseEntity<byte[]> 
(FileUtils.readFileToByteArray (file),headers,HttpStatus .CREATED); 
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在 fleDownload() 方 法 中 ， 首 先 根据 文件 路 径 和 需要 下 载 的 文件 名 来 创建 文件 对 象 ， 然 
后 对 响应 头 中 文件 下 载 时 的 打开 方式 即 下 载 方式 进行 设置 , 最 后 返回 ResponseEntity 封装 的 
下 载 结果 对 象 。 

使 用 ResponseEntity 对 象 ， 可 以 很 方便 地 定义 返回 的 HttpHeaders 和 HttpStatus。 上 面 代 
码 中 MediaType 代表 的 是 Internet Media Type， 即 互联 网 媒体 类 型 ， 也 叫做 MIME 类 型 。 在 
Http 协议 消息 头 中 ， 使 用 Content-Type 来 表示 具体 请 求 中 的 媒体 类 型 信息 。HttpStatus 类 型 
代表 的 是 Http 协议 中 的 状态 。 

(4) 重启 Tomcat， 浏 览 http://localhost:8080/springmve-5/ch10/index.jsp 网 址 ， 如 图 10-5 
所 示 。 浏 览 一 个 文件 并 上 传 该 文件 ， 上 传 成 功 后 的 效果 如 图 10-6 所 示 。 


- 0O x 
Ge 国 hapy/localhost8080/springmvc-5/ch1oyindexjsp @ 国 hpyWlocalhosts080 DD- C | 国文 件 上 传 成 功 
文件 日 ”篇 强 日。 章 看 (收藏 夫 工具 中 ”帮助 (H) 文件 旧病 问 ( 日 ” 坦 看 (收藏 去 (工具 上 四。 帮助 (H) 


浏览 . 


文件 上 传 成 功 ! 
上 传 文件 路 径 ，/springmvc-5fupload/01jpg 
0Lipg 


图 10-5 文件 上 传 表单 页 面 图 10-6 文件 上 传 成 功 后 的 页 面 


可 以 看 到 在 图 10-6 所 示 页 面 上 有 一 个 上 传 文件 名 的 超 链接 ， 单 击 该 超 链接 ， 会 出 现下 
载 提示 框 ， 如 图 10-7 所 示 (这 里 以 正 浏览 器 为 例 进行 演示 )。 

单 击 “ 打 开 ” 选 项 将 直接 打开 该 文件 ， 如 果 选 择 “ 保 存 ” 或 “另存 为 ”选项 ， 将 弹出 
“另存 为 ”对 话 框 ， 选 择 保存 路 径 。 

如 果 上 传 的 文件 名 称 中 带 有 中 文 ， 使 用 正 浏览 器 下 载 就 会 出 现 问题 ， 而 使 用 搜狗 、 
Chrome 浏览 器 下 载 ， 则 不 会 出 现 问题 ， 其 效果 如 图 10-8 所 示 。 


oe ee % 9 € 加 OH. http//ocalhosta0g0/springmve-s/fieUpload 
要 对 fileDownload?fileName=01_jpg 执行 什么 操作 ? 个， 匣 文 人 上 le 或 功 + 
大 小 : 49.6 KB 文件 上 传 成 功 ! 
来 源 ;localhost 上 传 文件 器 径 ，/springavc-5/upload/ 照 片 .jpg 
_ _ 画 盟 上 ipg 
一 打开 (O) 时 搜 机 高 这 下 载 
不 自动 保存 文件 。 
| xs 皇上 im 
全 保存 (5) 
下 到 国 s 本 本 ~] | 证 

一 另存 为 (A) 

10-7 文件 下 载 弹出 窗口 10-8 ”搜狗 浏览 器 下 载 带 中 文 名 称 的 效果 


10:3 小 结 
本 章 介绍 了 Spring MVC 环境 下 的 文件 上 传 和 文件 下 载 操作 。 首 先 讲解 了 如 何 实现 文件 上 


传 ， 并 通过 案例 演示 了 单 文件 上 传 和 在 HIML 5 模式 下 的 多 文件 上 传 功能 的 实现 。 在 文件 
下 载 中 , 介绍 了 Spring MVC 中 专门 提供 的 ResponseEntity 类 型 , 用 于 文件 下 载 功能 的 实现 。 
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“国际 化 ”是 指 一 个 应 用 程序 在 运行 时 能 够 根据 客户 端 请 求 所 在 国家 或 地 区 语言 的 不 
同 而 显示 不 同 的 用 户 界面 。 程 序 国际 化 是 商业 系统 的 一 个 基本 要 求 ， 当 前 的 系统 不 再 是 简 
单 的 单机 系统 ， 而 是 一 个 开放 的 系统 ， 需 要 面 对 来 自 全 世界 各 个 地 方 的 访问 者 ， 因 此 ， 国 
际 化 成 为 当前 商业 系统 不 可 少 的 一 部 分 。Spring MVC 的 国际 化 建立 在 Java 国际 化 的 基础 上 。 
在 实际 项 目 中， 拦截 器 的 使 用 非常 普遍 ， 如 在 某 购物 网 站 中 通过 拦截 器 可 拦截 未 登录 的 用 
户 ， 禁 止 其 添加 购物 车 、 购 买 商品 等 操作 。 在 Struts 2 框架 中 ， 拦 截 器 是 重要 的 组 成 部 分 ， 
Spring MVC 也 提供 了 Interceptor 拦截 器 机 制 ， 通 过 配置 即 可 对 请 求 进行 拦截 处 理 。 本 章 针 
对 Spring MVC 的 国际 化 和 拦截 器 进行 讲解 。 


11.1 Spring MVC 国际 化 
全 球 化 的 Intemet 需要 全 球 化 的 软件 。 全 球 化 软件 ,意味 着 一 个 软件 和 


不 同 地 区 的 市 场 。 当 一 个 软件 需要 在 全 球 范围 
环境 下 的 使 用 情况 ， 最 简单 的 要 求 就 是 在 用 户 
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地 区 和 不 同 的 语言 环境 下 ， 按 照 当 地 的 语言 和 格式 习惯 显示 字符 。 例 如 ， 对 于 中 国 大 陆 的 
用 户 ， 会 自动 显示 中 文 简体 的 提示 信息 、 错 误 信息 等 ， 而 对 于 美国 的 用 户 ， 会 自动 显示 英 
文 的 提示 信息 、 错 误 信息 等 。 

国际 化 的 程序 运行 在 本 地 机 器 上 时 ， 能 够 根据 本 地 机 器 的 语言 和 地 区 设置 显示 相应 的 
字符 ， 这 个 过 程 叫做 本 地 化 (Localization)。 

目前 ， 国 内 很 多 大 型 的 公司 网 站 主页 上 都 有 简体 中 文 、 繁 体 中 文 和 英文 可 以 选择 。 例 
如 ， 我 们 访问 中 国 建设 银行 的 网 站 ， 默 认 进 入 的 是 中 文 网 站 ， 在 网 页 的 右 下 角 有 “繁体 
/ENGLISH” 超 链接 ， 单 击 ENGLISH 就 切换 到 英文 网 页 ， 单 击 “ 繁 体 ”就 切换 到 繁体 中 文 
网 页 。 当 内 地 用 户 在 内 地 使 用 Google 时 ， 默 认 显 示 的 是 简体 中 文 ， 而 香港 用 户 在 香港 打开 
Google 时 ， 则 默认 显示 的 是 繁体 中 文 。 用 户 也 可 以 自 定义 选择 语言 资源 文件 ， 包 括 英文 。 

Spring MVC 的 国际 化 是 建立 在 Java 国际 化 的 基础 之 上 的 , 其 一 样 也 是 通过 提供 不 同 国 
家 /语言 环境 的 消息 资源 ， 然 后 通过 ResourceBundle 加 载 指定 Locale 对 应 的 资源 文件 ， 再 取 
得 该 资源 文件 中 指定 的 key 对 应 的 消息 。 过 程 与 Java 程序 的 国际 化 完全 相同 , 只 不 过 Spring 
MVC 框架 对 Java 程序 的 国际 化 进行 了 进一步 的 封装 ， 从 而 简化 了 应 用 。 

首先 熟悉 一 下 Spring MVC 的 国际 化 结构 ，DispatcherServlet 会 解析 一 个 LocaleResolver 
接口 对 象 ， 通 过 它 来 决定 用 户 区 域 ， 读 出 对 应 用 户 系统 设 定 的 语言 或 者 用 户 选择 的 语言 ， 
确定 其 国际 化 。 对 于 DispatcherServlet 而 言 ， 只 能 够 注册 一 个 LocaleResolver 接口 对 象 
LocaleResolver 接口 的 实现 类 在 Spring MVC 中 也 提供 了 多 个 实现 类 。 

Spring MVC 也 支持 国际 化 的 操作 , 主要 是 前 端 控制 器 内 部 拥有 国际 化 解析 器 。 在 Spring 
MVC 中 选择 语言 区 域 ， 可 以 使 用 Spring MVC 提供 的 语言 区 域 解析 器 接口 LocaleResolver， 
该 接口 的 常用 实现 类 都 在 org.springframework.web.servletilgn 包 下 ， 包 括 如 下 实现 类 。 

@ AcceptLanguageLocaleResolver: 控制 器 无 需 写 额外 的 内 容 ， 可 以 不 用 显 式 配置 。 

@ ”SessionLocaleResolver: 使 用 Session 传输 语言 环境 ,根据 用 户 Session 的 变量 读 取 
区 域 设置 ， 它 是 可 变 的 。 如 果 Session 没有 设置 ， 那 么 它 也 会 使 用 开发 者 设置 的 默 
认 值 。 

@ CookieLocaleResolver: 使 用 Cookie 传送 语言 环境 ， 根 据 Cookie 数据 获取 国际 化 
信息 ， 如 果 用 户 禁止 Cookie 或 者 没有 设置 ， 它 会 根据 acceptlanguage HTTP 头 部 
确定 默认 区 域 。 

由 于 AcceptLanguageLocaleResolver 是 固定 的 ， 所 以 现实 中 使 用 比较 多 的 是 可 以 手动 显 

式 配置 的 HttpSessionLocaleResolver 和 CookieLocaleResolver。 

在 Spring MVC 中 ， 不 直接 使 用 java.util.ResourceBundle 的 抽象 类 ， 而 是 使 用 
ResourceBundleMessageSource 类 作为 messageResource 的 bean， 告知 Spring MVC 国际 化 的 
属性 文件 保存 在 哪里 ， 配 置信 息 代码 如 下 : 


<bean id="messageSource" class="org.springframework.context.support 


.ResourceBundleMessageSource"> 
<property name="basename"> 
<list> 
<value>message</value> 
<value>yzpc</value> 
<1l1ist> 
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</property> 
</bean> 


如 果 项 目 中 只 有 一 组 属性 文件 ， 则 可 以 使 用 basename 来 指定 国际 化 属性 文件 的 名 称 ， 
代码 如 下 : 

<bean id="messageSource" class="org.springframework.context.support 

-ResourceBundleMessageSource"> 


<property name="basename" value="message" /> 
</bean> 


11.1.2 ”基于 浏览 器 请 求 的 国际 化 实现 


基于 浏览 器 请 求 的 国际 化 使 用 的 是 AcceptLanguageLocaleResolver 类 ， 该 类 是 默认 的 实 
现 类 ， 也 是 最 容易 使 用 的 语言 区 域 解 析 器 。Spring MVC 会 读 取 浏 览 器 的 accept-language 标 
题 ， 根 据 请 求 消息 头 自动 获取 语言 区 域 。AcceptLanguageLocaleResolver 可 以 不 用 显 式 配 置 ， 
也 可 以 显 式 配 置 。 

下 面 通过 一 个 注册 示例 来 讲解 基于 浏览 器 请 求 的 国际 化 实现 ， 操 作 步 又 如 下 。 

(1) 将 项 目 springmve-5 复制 并 重 命名 为 springmvc-6， 再 导入 到 Eclipse 开发 环境 中 。 
选中 springmvc-6 项 目 并 右 击 ， 在 快捷 菜单 中 选择 Properties 命令 ， 进 入 属性 设置 界面 ， 找 
到 Web Project Settings 选项 , 将 右 侧 Context Root 文本 框 中 的 springmve-5 改 为 springmvc-6， 
单 击 Apply and Close 按钮 。 删 除 sr 目录 下 相关 包 下 的 类 ， 在 WebContent 下 新 建 一 个 ch11 
文件 夹 ， 并 删除 ch10 文件 夹 ， 保 留 相 关 jar 包 以 及 springmvc.xml 配置 文件 。 

(2) 在 com.springmvc.entity 包 中 ， 新 建 User 的 实体 类 ， 代 码 如 下 : 

Package com.springmvc.entity; 

public class User { 

private String loginName; 
Private String password; 
private int age; 

private String email; 
private String phone; 


// 省 略 属性 的 getter 和 setter 方法 
// 省 略 构造 方法 


(3) 在 src 根 路 径 下 ， 新 建 message_en_US.properties 和 message_zh_CN.properties 两 个 
资源 文件 。message_en_US.properties 的 内 容 如 下 : 


loginName=LoginName 

password=Password 

age=Age 

email=Email 

phone=Phone 

submit=Submit 

welcome=Welcome {0} , Congratulations on your registration. 
title=Register Page 
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userName=Administrator 


info=Your registration information is as follows 
message _ zh_CN.properties 的 内 容 如 下 所 示 : 


loginName=\u540D\u79F0 

password=\u5BC6\u7801 

age=\u5E74\u9F84 

email=\u90AE\u7BB1 

phone=\u7535\u8BDD 

submit=\u6CE8\u518C 

welcome=\u6B22\u8FCE {0} \uFFOC 
\u606D\u559C\u60A8\u6CE8\u518C\u6210\u529F\u3002 
title=\u6CE8\u518C\u9875\u9762 
userName=\u7BA1\u7406\u5458 
info=\u60A8\u7684\u6CE8\u518C\u4FEl1\u606F\u5982\u4E0B 


在 最 新 版 的 Eclipse 中 ， 输 入 中 文 就 会 自动 转换 为 相应 编码 。 如 果 没 有 转换 ， 可 通过 
native2ascii.exe 工具 进行 转换 。 
(4) 在 springmvc.xml 配置 文件 中 加 载 国 际 化 资源 文件 ， 代 码 如 下 : 


<bean id="messageSource" class="org.springframework.context.support 
.ResourceBundleMessageSource"> 

<!-- 国际 化 资源 文件 名 --> 

<property name="basename" value="message" /> 
</bean> 
<!-- AcceptHeaderLocaleResolver 因为 是 默认 语言 区 域 解析 ， 可 不 配置 --> 
<bean id="localeResolver" class="org.springframework.web.servlet 
.il8n.AcceptHeaderLocaleResolver"/> 


在 web.xml 文件 中 配置 Spring MVC 的 前 端 控制 DispatcherServlet， 前 面 已 经 配置 。 
(5) 在 chll 文件 夹 中 ， 新 建 registerForm.jsp 页 面 ， 代 码 如 下 : 


<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<$%Q@ taglib prefix="fm" uri="http://www.springframework.org/tags/form" %> 
<body> 
<h3><spring:message code="title"/></h3> 
<fm:form modelAttribute: 
<spring:message code="loginName"/> 
<fm:input path="loginName"/><br> 
<spring:message code="password"/> 


user" metho post" action="register"> 


<fm:input path="password"/><br> 
<spring:message code="age"/> 
<fm:input path="age"/><br> 
<spring:message code="email"/> 
<fm:input path="email"/><br> 
<spring:message code="phone"/> 
<fm:input path="phone"/><br> 


<input type="submit" value="<spring:message code="submit"/>"/><br> 
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</fm: form> 
</body> 


在 注册 页 面 中 ， 通 过 <spring:message /> 标签 输出 国际 化 信息 ， 通 过 Spring MVC 的 表单 
标签 显示 文本 框 。 表 单 标签 不 进行 数据 绑 定 是 无 法 操作 的 ， 在 运行 程序 的 时 候 会 报错 ， 因 
为 表单 标签 是 依赖 于 数据 绑 定 操作 的 。 在 控制 器 中 首先 需要 新 建 一 个 User 的 引用 ， 也 就 是 
说 要 有 一 个 User 对 象 才 能 使 User 对 象 的 相应 属性 绑 定 到 表单 input 标签 。 

(6) 在 com.springmvc.controller 包 下 的 UserController 类 中 ， 添 加 动态 跳 转 的 
registerForm() 方 法 、 注 册 的 register0 方 法 ， 如 下 所 示 : 


Package com.springmvc.controller; 
import javax.servlet.http.HttpServletRequest; 
import org.springframework.stereotype.Controller; 
import org.springframework.ui.Model; 
import org.springframework.validation.annotation.Validated; 
import org.springframework.web.bind.annotation.*; 
import org.springframework.web.servlet.support.RequestContext; 
import com.springmvc.entity.User; 
@Controller 
public class UserController { 
@RequestMapping (value="/{formName}") 
public String registerForm(@PathVariable String formName, Model model) { 
User user=new User(); 
model.addAttribute ("user", user); 
return formName; // 动 态 跳 转 到 页 面 
} 
@RequestMapping (value="/register",method=RequestMethod.POST) 
public String register (@ModelAttribute @Validated User user,Model 
model,HttpServletRequest request) { 
// 从 后 台 代 码 获取 国际 化 资源 文件 中 的 信息 userName 
RequestContext requestContext = new RequestContext (request); 
String username = requestContext.getMessage ("userName"); 
System.out.println (userName); 
model .addAttribute ("user",user); 
return "success"; 


} 


register() 方 法 接收 请 求 ， 可 通过 RequestContext 对 象 的 getMessage() 方 法 来 获取 国际 化 
消息 ， 跳 转 到 success.jsp 页 面 。 
(7) 在 chll 文件 夹 中 ， 新 建 success.jsp 页 面 ， 并 添加 spring 标签 ， 代 码 如 下 : 


<font color="blue"><h4><spring:message code="welcome" 


arguments="${requestScope.user.loginName }"/></h4></font> 
<spring:message code="info"/><br> 
<spring:message code="password"/>:${requestSscope.user.password }<br> 


<spring:message age"/>:${requestscope.user.age }<br> 


<spring:message email"/>:${requestScope.user.email }<br> 


<spring:message code="phone"/>:${requestSscope.user.phone }<br> 
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在 该 页 面 中 ， 使 用 spring 的 message 标签 读 取 资源 文件 中 名 为 welcome 的 消息 ， 并 设 
置 一 个 参数 ， 参 数 的 值 为 user 对 象 的 loginName 属性 。 其 他 几 个 属性 也 在 页 面 上 输出 。 

(8) 部 署 springmvc-6 这 个 Web 项 目 ， 在 浏览 器 的 地 址 栏 中 输入 URL 进行 测试 : 
http://localhost:8080/springmve-6/registerForm, 运行 界面 如 图 11-1 所 示 。 在 注册 页 面 上 ， 输 
入 名 称 、 密 码 等 相关 信息 ， 单 击 “ 注 册 ” 按 钮 ， 请 求 将 被 提交 到 Controller， 可 从 后 台 代码 
获取 国际 化 资源 文件 中 的 信息 userName， 并 在 控制 台 打印 出 该 信息 ， 然 后 跳 转 到 success.jsp 
页 面 ， 如 图 11-2 所 示 。 


一 口 x 
Ge 国 hupy/ocalhostao80, P -| 园 注 8 


文件 日 ”篇 名 (日 ” 喜 看 (收藏 交 A) 工具 中 帮助 (H) 


Ee 口 X 
@ hap://localhost8080, 用 ~ CC 网 注 册页 面 
文件 昌 ”篇 铝 E) ”查看 (V) ”收藏 夫 ( 和 工具 中 帮助 (H) 


注册 页 面 欢迎 yzpe ， 共 豆 您 注册 成 力 。 

名 称 ， [yzpe 的 注册 信息 如 下 

密码 ， |123456 狂人 

年 龄 ，D23 年 龄 -23 

邮箱 ，|shi@yzpcedu cn 邮箱 -shi@yzpc.edu.cn 

电话 ， |13245678901 电话 :13245678901 

注册 

图 11-1 基于 浏览 器 请 求 的 注册 页 面 图 11-2 基于 浏览 器 请 求 的 成 功 页 面 


(9) 为 测试 springmvc-6 项 目的 国际 化 ， 需 要 修改 浏览 器 的 语言 顺序 (以 Windows 10 系 
统 为 例 ， 不 同 的 系统 会 有 所 区 别 )。 在 浏览 器 中 依次 单 击 “ 工 具 ” 一 “Internet 选项 ”一 “ 常 
规 ” 选 项 卡 一 “语言 ”， 出 现 “ 语 言 首 选项 ”对 话 框 ， 单 击 “ 设 置 语言 首选 项 ”按钮 进入 
“语言 ”窗口 。 在 “更 改 语言 首选 项 ”下 ， 如 果 有 English(United States) 选 项 ， 则 将 其 上 移 
到 最 上 方 ， 如 果 没 有 English(United States) 选 项 ， 则 需要 单 击 “ 添 加 语言 ”按钮 ， 找 到 “ 英 


语 ” 一 “英语 (美国 )”， 双 击 即 可 添加 ， 再 调整 语言 顺序 ， 如 图 11-3 所 示 。 


lmternet 加 | Er - 0 x 
PE I bese 5 


Fe mal wa IAD wo 
于 
省 加 用 于 需要 网站 的 浊 喜 ,过 居 4。 攻克 更 改 放言 商 运 项 


me 要 于， 位 于 开 和 其 一 位 吉 畔 二 到 人 关公: 入 
We ese 


Wodew 中 二 于 审 已 订 昌 
pe | 送信 守 视 让 香 人 六 or 本 。 渤 呈 
日 天 时 同和 相 字 入 苑 


添加 语言 
Rs 
rasasn 人 
Doe GE 邱 碟 届 玫 二 
EST ca 
Cp 
se 


Yordbs | Tenevet | 


E33 [和 


二 EE Er 


11-3 ”修改 语言 设置 
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再 次 在 浏览 器 中 输入 http://localhost:8080/springmvc-6/registerForm 进行 测试 ， 会 看 到 如 
图 11-4 所 示 的 界面 。 输 入 相关 信息 ， 单 击 Submit 按钮 ， 请 求 将 被 提交 到 Controller， 而 后 
跳 转 到 successjsp 页 面 ， 如 图 11-5 所 示 。 


- D x - 0O x 
国 hup//ocalhosta080, PD- © || 国 Registern| 国 hapyhlocalhostaoao DP- 0 | 因 Register 
文件 日 ” 编 铝 (E) ”前 看 VV) 收藏 夫 (A) 工具 中 。 帮助 (H) 文件 加 帝 得 日 ”查看 收藏 交 各 工具 中。 帮助 (H) 


Register Page Welcome yzpc , Congratulations on your 
registration. 

LoginName: [yzpc | 
Password: |123456 Your registration information is as follows 
A 23 Password:123456 

ge 
Email, [shi@yzpc edu en 2 
Phone: |13245678901 Be 

Submit 

图 11-4 测试 英文 注册 页 面 11-5 ”测试 英文 注册 成 功 页 面 


可 以 看 到 ， 页 面 显示 和 注册 完 后 的 信息 都 变 成 了 英文 版 ， 实 现 了 国际 化 的 功能 。 


11.1.3 ”基于 HttpSession 的 国际 化 实现 


基于 HttpSession 的 国际 化 实现 使 用 的 是 LocaleResolver 接口 的 SessionLocaleResolver 
实现 类 ，SessionLocaleResolver 不 是 默认 的 语言 区 域 解析 器 ， 需 要 对 其 进行 显 式 配置 。 如 果 
使 用 它 ，Spring MVC 会 从 HttpSession 作用 域 中 获取 用 户 所 设置 的 语言 区 域 , 来 确定 使 用 哪 
个 语言 区 域 。 通 过 请 求 参数 改变 国际 化 的 值 时 ， 可 使 用 Spring 提供 的 国际 化 拦截 器 
LocaleChangeInterceptor, 拦截 器 的 知识 在 下 节 讲 解 。 这 里 我 们 来 看 一 下 SessionLocaleResolver 
实现 国际 化 时 的 工作 原理 ， 如 图 11-6 所 示 。 


SessionLocaleResolver 


把 Locale 对 象 设置 为 
Session 的 属性 


从 Session 中 获取 Locale 
对 象 


把 第 一 步 的 request_locale 
请 求 参数 解析 为 Locale 对 象 
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下 面 通过 修改 注册 示例 来 讲解 SessionLocaleResolver 的 实现 ， 步 又 如 下 。 
(1) 修改 springmvc.xml 配置 文件 ， 注 释 默 认 的 AcceptLanguageLocaleResolver 类 型 的 
Bean localeResolver, 添加 SessionLocaleResolver 类 型 的 Bean, 并 添加 国际 化 操作 的 拦截 器 ， 
配置 如 下 : 


<!-- SessionLocaleResolver 配置 --> 
<bean id="localeResolver" 
class="org.springframework.web.servlet.il8n.SessionLocaleResolver"/> 


<mvc:interceptors> 
<!-- 如 果 采 用 基于 session/cookie 的 国际 化 ， 必 须 配置 国际 化 操作 拦截 器 --> 
<bean class= 
"org.springframework.web.servlet.il8n.LocaleChangeInterceptor"/> 


</mvc:interceptors> 


(2) 为 了 方便 切换 ， 在 registerForm-jsp 的 注册 页 面 上 ， 添 加 中 文 和 英文 的 超 链接 ， 分 别 
用 于 切换 中 文 和 英文 语言 环境 ， 代 码 如 下 : 


<body> 
<a href="registerForm?request locale=zh_CN"> 中 文 </a> 
<a href="registerForm?request_locale=en US"> 英 文 </a> <br/> 
<h3><spring:message code="title"/></h3> 
dd <!-- 省 略 未 修改 的 表单 --> 
</fm: form> 
</body> 


(3) 修改 动态 获取 跳 转 页 面 的 registerForm0) 方 法 ， 代 码 如 下 : 


@RequestMapping (value="/{formName}") 
public String registerForm(@PathVariable String formName, String 
vequestNlocale,Model model,HttpServletRequest request) { 
System.out.println("request locale="+request locale); 
if (request locale!=null) { 
if (request locale.equals("zh CN")) { // 设 置 中 文 环境 
Locale locale=new Locale ("zh","CN"); 
request .getSession() .setAttribute (SessionLocaleResolver 
-LOCALE SESSION ATTRIBUTE NAME,1locale); 
jelse if (request_locale.equals ("en_US")){// 设 置 英文 环境 
Locale locale=new Locale ("en", "US"); 
request .getSession() .setAttribute (SessionLocaleResolver 
-LOCALE SESSION ATTRIBUTE NAME,1locale); 
}else { // 使 用 之 前 的 语言 环境 
request .getSession() .setAttribute (SessionLocaleResolver 
-LOCALE SESSION ATTRIBUTE NAME,LocaleContextHolder.getLocale()); 
} 
¥ 


User user=new User(); 
model .addAttribute ("user", user); 


return formName;  // 动 态 跳 转 页 面 
} 


registerForm 根据 提交 的 request locale 参数 值 , 获取 Session 对 象 , 并 调用 setAttribute0) 
方法 进行 语言 切换 。 


@< do dd a 
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(4) 重新 启动 Tomcat， 访 问 http://localhost:8080/springmvc-6/registerForm 网 址 ， 会 看 到 


如 图 11-7 所 示 的 界面 。 单 击 “ 英 文 ” 超 链接 ,页 面 会 切换 为 英文 语言 环境 ， 如 图 11-8 所 示 。 
- 0O x - 0O x 
@ 国 httpy/localhost8080, PD- 0 | 国 注 册页 面 全 国 hapy/localhost8080 DO Register 
文件 昌 ”编辑 (E) 二 看 (VW) 收藏 夫 (A) 工具 (DD 帮助 (HH) 文件 昌 ”入 辑 (E) ”查看 VW) 收藏 夫 (A) 工具 (D 帮助 (H) 
中 文 | 英文 中 文 | 英文 
注册 页 面 Register Page 
名 称 ，[yzpc LoginName: [yzpc 
密码 ，|123456 Password， [123456 
年 龄 ，|23 Age: [23 
邮箱 ，|shi@yzpcedu .cn Email， [shi@yzpc edu cn 
电话 ，|13245678901 Phone: [13245678901 
注册 Submit 
图 11-7 基于 Session 的 国际 化 中 文 页 面 11-8 基于 Session 的 国际 化 英文 页 面 


页 面 最 上 方 有 两 个 超 链 接 ， 用 于 切换 中 文 和 英文 语言 环境 ， 单 击 超 链接 ， 控 制 台 窗口 
就 会 输出 相应 语言 的 request_locale 参数 值 ，UserController 的 registerForm() 方 法 根据 提交 的 
参数 值 ， 进 行 语言 切换 。 输 入 相应 内 容 ， 单 击 “ 注 册 ” 按 钮 ， 请 求 被 提交 到 Controller， 而 
后 跳 转 到 success.jsp 页 面 ， 该 页 面 将 会 根据 语言 环境 显示 欢迎 语句 。 


注意 : 有 些 版 本 的 正 浏览 器 ， 不 管 中 文 还 是 英文 页 面 提交 后 ，success.jsp 显示 的 都 是 同一 
种 语言 ， 换 成 FireFox、 搜 狗 等 其 他 类 型 浏览 器 就 没有 此 问题 。 


11.1.4 基于 Cookie 的 国际 化 实现 


基于 Cookie 的 国际 化 实现 使 用 的 是 LocaleResolver 接口 的 CookieLocaleResolver 实现 
类 ，CookieLocaleResolver 不 是 默认 的 语言 区 域 解析 器 ， 需 要 对 其 进行 显 式 配 置 。 如 果 使 用 
它 ，Spring MVC 会 从 Cookie 域 中 获取 用 户 所 设置 的 语言 区 域 ， 来 确定 使 用 哪个 语言 区 域 。 

下 面 继续 修改 注册 示例 来 讲解 CookieLocaleResolver 的 实现 ， 步 又 如 下 。 

(1) 修改 springmvec.xml 配置 文件 ， 注 释 前 面 配 置 的 id 为 localeResolver 的 
SessionLocaleResolver 类 型 的 Bean， 添 加 CookieLocaleResolver 类 型 的 Bean， 配 置 如 下 : 

<!-- CookieLocaleResolver 配置 --> 


<bean id="localeResolver" 
class="org.springframework.web.servlet.il8n.CookieLocaleResolver"/> 


(2) 修改 UserController 类 中 动态 获取 跳 转 页 面 的 registerForm() 方 法 ， 代 码 如 下 : 


@RequestMapping (value="/{formName}") 
Public String registerForm(@PathVariable String formName,String 
request locale,Model model,HttpServletRequest request, HttpPServ letResponse 
response) 1{ 
System.out.println("request locale="+request locale); 
if (request locale!=null) { 
if (request locale.equals("zh CN")) { // 设 置 中 文 环境 
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Locale locale=new Locale ("zh"， "CN"); 

(new CookieLocaleResolver ()) - setLocale (request, response, locale); 
}else if(request locale.equals ("en US")){ // 设 置 英文 环境 

Locale locale=new Locale ("en", "US"); 

(new CookieLocaleResolver () ) .setLocale (request, response, locale); 
}else { // 使 用 之 前 的 语言 环境 

(new CookieLocaleResolver() ) .setLocale (request, 

response, LocaleContextHolder.getLocale()); 


} 
User user=new User(); 
model.addAttribute ("user", user); 


return formName; // 动 态 跳 转 页 面 


registerForm() 方 法 根据 提交 的 request_locale 参数 值 ， 创 建 CookieLocaleResolver 对 象 ， 
并 调用 setLocale 方法 将 语言 环境 设置 在 Cookie 中 ， 从 而 进行 了 语言 环境 切换 。 

(3) 重启 Tomcat, 使 用 Firefox 浏览 器 访问 http://localhost:8080/springmvc-6/registerForm 
地 址 ， 会 看 到 中 文 界面 。 单 击 “ 英 文 ” 超 链接 ， 页 面 切 换 为 英文 语言 环境 。 

按 F12 键 进入 Firefox 火狐 浏览 器 的 开发 者 模式 的 调试 窗口 ， 选 择 “网 络 ”， 单 击 相应 
的 状态 请 求 ， 右 侧 就 会 出 现 相 应 的 请 求 信 息 ， 切 换 到 “消息 头 ”选项 卡 ， 可 以 看 到 ， 请 求 
头 中 传递 的 是 “zh_CN”， 而 响应 头 中 则 是 “en_ US”， 这 说 明 程 序 通过 Cookie 进行 了 语 
言 环境 切换 ， 如 图 11-9 所 示 。 


回 ”消息 头 Cookie ”大 数 响应 耗 时 
请 求 网 址 : http://1localhost:8080/springme-6/registerFors{eauest_1ocale-en us | 
请 求 方法 : 6ET 
远程 地 址 : 127.6.9.1:8689 
状态 码 : ED 。 帝 纺 和 重 发 原 治 关 
版 本 : HTTP/1.1 
过 海 消息 头 
”响应 头 (231 字 节 ) 
Content-Language: en-US 
Content-Length: 906 
Content-Type: text/html:charset=UTF-8 
Date: Sat 14 Jul 2018 04:14:49 GMT 
[Set-Coolie: org.springframeworkweb.servle.. Resolver.LOCALE=en_ US]Path=/ 
请 求 头 (617 字 节 ) 
Accept: text/htmlapplication/xhtml+xm.-plication/xmbq=0.9"/“q=0.8 
Accept-Encoding: gzip, deflate 
Accept-Language: zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2 
Connection: keep-alive 
Cookie: JSESSIONID=777CADC4FFFE70101FD..ieLocaleResolver.LOCALE=zh_CN 
Host localhost:8080 
Referer httpy/localhost8080/springmv.. isterForm guest ocae=zm cvV] 
Upgrade-Insecure-Requests: 1 
User-Agent: Mozilla/5.0 (Windows NT 10.0; ..) Gecko/20100101 Firefox/61.0 


11-9 基于 Cookie 的 国际 化 调试 窗口 


在 调试 窗口 中 , 切换 到 Cookie 选 项 卡 , 可 以 明显 看 到 响应 Cookie 为 en_US 和 请 求 Cookie 
为 zh_CN 是 不 一 样 的 ， 如 图 11-10 所 示 。 
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回 消息 头 Cooke 参数 响应 新 时 
过 小 Cookie 
了 响应 Cookie 
= org.springframework.web.servlet.i18n.CookieLocaleResolver.LOCALE: 
path: / 
value: en_US 
请 求 Cookie 
JSESSIONID: 777CADC4FFFE70101FDE6A639993ABAE 


org.springframework.web.servleti18n.CookieLocaleResolver.LOCALE: zh_CN 


11-10 ”测试 基于 Cookie 的 国际 化 


输入 相应 内 容 ， 单 击 “ 注 册 ” 按 钮 ， 请 求 被 提交 到 Controller， 而 后 跳 转 到 success.jsp 
页 面 ， 该 页 面 将 会 根据 语言 环境 显示 欢迎 语句 。 


11.2 Spring MVC 拦截 器 


拦截 器 是 Spring MVC 中 强大 的 控件 , 它 可 以 在 进入 处 理 器 之 前 做 一 些 操作 , 或 者 在 处 
理 器 完成 后 进行 操作 ， 甚 至 是 在 泻 染 视图 后 进行 操作 。 


11.2.1 ”拦截 器 概述 


对 于 任何 优秀 的 MVC 框架 , 都 会 提供 一 些 通用 的 操作 , 如 请 求 数据 的 封装 、 类 型 转换 、 
数据 校 验 、 解 析 上 传 的 文件 、 防 止 表单 的 多 次 提交 等 。 早 期 的 MVC 框架 将 这 些 操作 都 写 在 
核心 控制 器 中 ， 而 这 些 常 用 的 操作 又 不 是 所 有 的 请 求 都 需要 实现 的 ， 这 就 导致 了 框架 的 灵 
活性 不 足 ， 可 扩展 性 降低 。 

Spring MVC 提供 了 Interceptor 拦截 器 机 制 ， 类 似 于 Servlet 中 的 Filter 过 滤器 ， 用 于 拦 
截 用 户 的 请 求 并 做 出 相应 的 处 理 。 比 如 通过 拦截 器 来 进行 用 户 权限 验证 ， 或 者 用 来 判断 用 
户 是 否 已 经 登录 。Spring MVC 拦截 器 是 可 插 拔 式 的 设计 ， 需 要 某 一 功能 拦截 器 ， 只 需 在 配 
置 文件 中 应 用 该 拦截 器 即 可 ， 如 果 不 需 要 这 个 功能 拦截 器 ， 只 需 在 配置 文件 中 取消 应 用 该 
拦截 器 。 

要 在 Spring MVC 中 使 用 拦截 器 ， 就 需要 对 拦截 器 进行 定义 和 配置 。 在 Spring MVC 中 
定义 拦截 器 有 两 种 方法 : 

@ ”实现 HandlerInterceptor 接口 , 或 者 继承 实现 HandlerInterceptor 接口 的 实现 类 (例如 

HandlerInterceptorAdapter)。 
@ ”实现 WebRequestInterceptor 接口 ， 或 者 继承 实现 WebRequestInterceptor 接口 的 实 
现 类 。 


1. 实现 Handlerlnterceptor 接口 


首先 来 看 看 HandlerInterceptor 接口 的 源码 , 该 接口 位 于 org.springframework.web.servlet 
的 包 中 ， 定 义 了 三 个 方法 ， 代 码 如 下 : 
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Package org.springframework.web.servlet; 


public interface HandlerInterceptor { 

boolean preHandle (HttpServletRequest request, HttpServletResponse 
response, Object handler) throws Exception; 

void postHandle (HttpServletRequest request, HttpServletResponse 
response, Object handler,ModelAndView modelAndView) throws Exception; 

void afterCompletion (HttpServletRequest request, HttpServletResponse 
response,Object handler,Exception ex) throws Exception; 


} 


如 果 要 实现 HandlerInterceptor 接口 , 就 要 实现 三 个 方法 , 分别 是 preHandle、postHandle 
和 afterCompletion， 关 于 这 三 个 方法 的 具体 描述 如 下 。 
@ preHandle 方法 : 该 方法 在 执行 控制 器 方法 之 前 执行 。 返 回 值 为 Boolean 类 型 ， 如 
果 返 回 false， 表 示 拦 截 请 求 ， 不 再 向 下 执行 ， 如 果 返 回 true， 表 示 放 行 ， 程 序 继 
续 向 下 执行 (如 果 后 面 没有 其 他 Interceptor， 就 会 执行 Controller 方法 )。 所 以 ， 此 
方法 可 对 请 求 进行 判断 ， 决 定 程序 是 否 继续 执行 ， 或 者 进行 一 些 初始 化 操作 及 对 
请 求 进行 预 处 理 。 
@ ”postHandle 方法 : 该 方法 在 执行 控制 器 方法 调用 之 后 , 且 在 返回 ModelAndView 之 
前 执行 。 由 于 该 方法 会 在 DispatcherServlet 进行 返回 视图 泻 染 之 前 被 调用 ， 所 以 此 
方法 多 被 用 于 处 理 返回 的 视图 ， 可 通过 此 方法 对 请 求 域 中 的 模型 和 视图 做 进一步 
的 修改 。 
@ ”afterCompletion 方法 : 该 方法 在 执行 完 控制 器 之 后 执行 。 由 于 是 在 Controller 方法 
执行 完毕 后 执行 该 方法 ， 所 以 该 方法 适合 进行 一 些 资源 清理 、 记 录 日 志 信 息 等 处 
理 操 作 。 
这 里 需要 注意 的 是 ， 由 于 preHandle 方法 决定 了 程序 是 否 继续 执行 ， 所 以 postHandle 及 
afterCompletion 方法 只 能 在 当前 Interceptor 的 pretHandle 方法 的 返回 值 为 true 时 才 会 执行 。 
在 实现 了 HandlerInterceptor 接口 之 后 ， 需 要 在 Spring 的 类 加 载 配置 文件 中 配置 拦截 器 
实现 类 ,才能 使 拦截 器 起 到 拦截 的 效果 。HandlerInterceptor 类 加 载 配置 有 两 种 方式 ， 分 别 是 
“针对 HandlerMapping 配置 ”和 “全 局 配置 ”。 
(1) 针对 HandlerMapping 配置 ， 样 例 代 码 如 下 : 
<bean class="org.springframework.web.servlet.handler 
.BeanNameUrlHandlerMapping"> 
<property name="interceptors"> 


<list> 
<ref bean="myInterceptorl"/> 


<ref bean="myInterceptor2"/> 
</list> 
</property> 
</bean> 
<bean id="myInterceptorl" class="com.interceptor.MyInterceptor1l"/> 
<bean id="myInterceptor2" class="com.interceptor.MyInterceptor2"/> 


这 里 为 BeanNameUrlHandlerMapping 处 理 映 射 器 配置 了 一 个 interceptors 拦截 器 链 ， 该 
拦截 器 链 中 包含 myInterceptorl 和 myInterceptor2 两 个 拦截 器 , 具体 实现 分 别 对 应 下 面 id 为 


@< EE 
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ImyIterceptorl 和 myInterceptor2 的 bean 配置 。 此 种 配置 的 优点 是 针对 具体 的 处 理 映射 器 进 
行 拦 截 操作 ， 缺 点 是 如 果 使 用 多 个 处 理 映射 器 ， 就 要 在 多 处 添加 拦截 器 的 配置 信息 ， 比 较 
烦琐 。 
(2) 针对 全 局 配置 ， 只 需 在 Spring 的 类 加 载 配置 文件 中 添加 <mvc:interceptors> 标 签 对 ， 
在 该 标签 对 中 配置 拦截 器 ， 可 起 到 全 局 拦截 器 的 作用 ， 样 例 代 码 如 下 : 
<!-- 配置 拦截 器 --> 
<mvc:interceptors> 
<!-- 使 用 bean 直接 定义 在 <mvc:interceptors> 下 面 的 拦截 器 将 拦截 所 有 请 求 --> 
<bean class="com.springmvc.interceptor.MyInterceptor"/> 
<!-- 定义 多 个 拦截 器 ， 顺 序 执行 --> 
<mvc:interceptor> <!-- 拦截 器 1 --> 
<mvc:mapping path="/**"/> <!-- 配置 拦截 器 作用 的 路 径 --> 
<mvc:exclude-mapping path=""/><!-—— 配置 不 需要 拦截 器 作用 的 路 径 --> 
= 定义 在 <mvc: interceptor> 下 面 的 拦截 器 ， 表示 对 匹配 路 径 请 求 才 进行 拦截 --> 
<bean class="com.springmvc.interceptor.MyInterceptor1l"/> 
</mvc:interceptor> 
<mvc:interceptor> <!-- 拦截 器 2 --> 
<mvc:mapping path="/hello"/> 
<bean class="com.springmvc .interceptor.MYInterceptor2"/> 
</mvc:interceptor> 


</mvc:interceptors> 


在 上 面 的 配置 中 , 可 在 <mvc:interceptors> 标 签 下 配置 多 个 拦截 器 ,其 子 元 素 <bean> 定 义 
的 是 全 局 拦截 器 ， 它 会 拦截 所 有 请 求 ， 而 <mvc:interceptor> 元 素 中 定义 的 是 指定 元 素 的 拦截 
器 ， 它 会 对 指定 路 径 下 的 请 求生 效 ， 其 子 元 素 必 须 按照 <mve:mapping .人 > 一 
<mvc:exclude-mapping .…. 人 一 <bean .…/> 的 顺序 ， 否 则 文件 会 报错 。<mve:interceptor> 元 素 的 
<mvc:mapping> 子 元 素 用 于 配置 拦截 器 作用 的 路 径 ， 该 路 径 在 其 属性 path 中 定义 。 如 上 述 
path 的 属性 值 为 “/#** ”表示 拦截 所 有 路 径 , “hello” 表 示 拦 截 所 有 以 “Ahello ”结尾 的 路 径 。 
如 果 在 请 求 路 径 中 包含 不 需要 拦截 的 内 容 ， 可 以 通过 <mvc:exclude-mapping> 元 素 进 行 配 置 。 


2. 实现 WebRequestlnterceptor 接口 


WebRequestInterceptor 中 也 定义 了 三 个 方法 , 也 是 通过 这 三 个 方法 来 实现 拦截 的 。 这 三 
个 方法 都 传递 同一 个 参数 WebRequest ,那么 这 个 WebRequest 是 什么 呢 ? 这 个 WebRequest 
是 Spring 定义 的 一 个 接口 ， 它 里 面 的 方法 定义 都 基本 与 HttpServletRequest 一 样 ， 在 
WebRequestInterceptor 中 对 WebRequest 进行 的 所 有 操作 都 将 同步 到 HttpServletRequest 
中 ， 然 后 在 当前 请 求 中 一 直 传递 。 三 个 方法 介绍 如 下 。 

(1) preHandle(WebRequest request) 方法 。 该 方法 将 在 请 求 处 理 之 前 进行 调用 ， 也 就 是 
说 会 在 Controller 方法 调用 之 前 被 调用 。 这 个 方法 与 HandlerInterceptor 中 的 preHandle 不 同 ， 
主要 区 别 在 于 该 方法 的 返回 值 是 void ， 也 就 是 没有 返回 值 ， 所 以 我 们 一 般 主 要 用 它 来 进行 
资源 的 准备 工作 ， 比 如 我 们 在 使 用 Hibermate 的 时 候 可 以 在 这 个 方法 中 准备 一 个 Hibernate 
的 Session 对 象 ， 然 后 利用 WebRequest 的 setAttributeCname，value，scope) 方 法 把 它 放 到 
WebRequest 的 属性 中 。setAttribute 方法 的 第 三 个 参数 scope 是 Integer 类 型 的 ， 在 WebRequest 
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的 父 层 接口 RequestAttributes 中 对 它 定义 了 三 个 常量 : 

@ SCOPE REQUEST: 它 的 值 是 0， 代 表 只 有 在 request 中 可 以 访问 。 

@ ”SCOPE SESSION: 它 的 值 是 1， 如 果 环 境 允 许 的 话 ， 它 代表 的 是 一 个 局 部 隔离 的 

session， 和 否则 就 代表 普通 的 session， 并 且 在 该 session 范围 内 可 以 访问 。 

@ SCOPE GLOBAL SESSION: 它 的 值 是 2， 如 果 环境 允许 的 话 ， 它 代表 的 是 一 个 

全 局 共享 的 session, 否则 就 代表 普通 的 session, 并 且 在 该 session 范围 内 可 以 访问 。 

(2) postHandle(WebRequest request ModelMap model) 方法 。 该 方法 将 在 请 求 处 理 之 后 ， 
也 就 是 在 Controller 方法 调用 之 后 被 调用 , 但 是 会 在 视图 返回 被 泻 染 之 前 被 调用 , 所 以 可 以 
在 这 个 方法 里 面 通过 改变 数据 模型 ModelMap 来 改变 数据 的 展示 。 该 方法 有 两 个 参数 ， 
WebRequest 对 象 是 用 于 传递 整个 请 求 数据 的 ， 比 如 在 preHandle 中 准备 的 数据 都 可 以 通过 
WebRequest 来 传递 和 访问 ; ModelMap 就 是 Controller 处 理 之 后 返回 的 Model 对 象 , 我 们 
可 以 通过 改变 它 的 属性 来 改变 返回 的 Model 模型 。 

(3) afterCompletion(WebRequest request Exception ex) 方法 。 该 方法 会 在 整个 请 求 处 理 
完成 ， 也 就 是 在 视图 返回 并 被 泻 染 之 后 执行 。 所 以 在 该 方法 中 可 以 进行 资源 的 释放 操作 。 
而 WebRequest 参数 就 可 以 把 我 们 在 preHandle 中 准备 的 资源 传递 到 这 里 进行 释放 。 
Exception 参数 表示 当前 请 求 的 异常 对 象 , 如 果 在 Controller 中 抛 出 的 异常 已 经 被 Spring 的 
异常 处 理 器 给 处 理 了 ， 那 么 这 个 异常 对 象 就 是 null。 


11.2.2 ”拦截 器 执行 流程 


1. 单个 拦截 器 的 执行 流程 


在 运行 程序 时 ， 拦 截 器 的 执行 是 有 一 定 顺序 的 ， 该 顺序 与 配置 文件 中 所 定义 的 拦截 的 
顺序 相关 。 如 果 在 程序 中 只 定义 了 一 个 拦截 器 ， 则 该 单个 拦截 器 在 程序 中 的 执行 流程 如 


11-11 所 示 。 
MyInterceptor HandlerAdapter 
(preHandle) (Handle) 
MYyIterceptor 
(afterCompletion) 


图 11-11 单个 拦截 器 的 执行 流程 


程序 首先 执行 拦截 器 类 中 的 preHandle0 方 法 , 如 果 该 方法 的 返回 值 是 tue, 则 程序 会 继 
续 向 下 执行 处 理 器 中 的 方法 , 否则 不 再 向 下 执行 ; 在 业务 控制 器 类 Controller 处 理 完 请 求 后 ， 
会 执行 postHandle0 方 法 ， 而 后 会 通过 DispatcherServlet 向 客户 端 返回 响应 ; 在 
DispatcherServlet 处 理 完 请 求 后 ， 才 会 执行 afterCompletion() 方 法 。 

下 面 在 springmvc-6 的 项 目 中 通过 示例 来 演示 单个 拦截 器 的 执行 流程 ， 步 骤 如 下 : 

(1) 在 src 目录 下 的 com.springmvc.controller 包 中 的 UserController 类 中 , 注释 动态 跳 转 
页 面 的 方法 。 新 建 一 个 hello0 方 法 ， 并 使 用 @RequestMapping 注解 进行 映射 ， 代 码 如 下 : 


@< TE EC EC TC a ER 


MyInterceptor 
(postHandle) 


DispatcherServlet 
(render) 
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// 页 面 跳 转 


@RequestMapping ("/hello") 
public String hello() { 


S 


ystem.out.println ("Hello! Controller 控制 器 类 执行 hello() 方 法 ") ; 


return "hello"; 


} 


(2) 在 src 目录 下 , 新 建 一 个 com.springmvc.interceptor 包 , 创建 拦截 器 类 MyInterceptor， 
该 类 需要 实现 HandlerInterceptor 接口 ， 并 重 写 其 中 的 相应 方法 ， 在 方法 中 通过 输出 语句 来 


输出 信息 ， 


代码 如 下 : 


Package com.springmvc.interceptor; 


import javax.servlet.http.*; 
import org.springframework.web.servlet.*; 
public class MyInterceptor implements HandlerInterceptor { 
@override 
public boolean preHandle (HttpServletRequest request, 
HttpServletResponse response, Object handler) throws Exception { 


于 


System.out.println ("MyInterceptor 拦截 器 执行 preHandle () 方 法 ") ; 
return true; 


@override 
public void postHandle (HttpServletRequest request, HttpServletResponse 


response, Object handler, 


} 


ModelAndView modelAndView) throws Exception { 
System.out.println ("MyInterceptor 拦截 器 执行 postHandle () 方 法 ")， 


@override 

public void afterCompletion(HttpServletRequest request, 
HttpServletResponse response, Object handler, Exception ex) 

throws Exception { 


加 


System.out.println ("MyInterceptor 拦截 器 执行 aftercompletion() 方 法 


(3) 在 springmve.xml 的 配置 文件 中 ， 添 加 拦截 器 配置 ， 代 码 如 下 : 


<mvc :interceptors> <!-- 配置 拦截 器 --> 
<!-- 使 用 bean 直接 定义 在 <mvc:interceptors> 下 面 的 拦截 器 将 拦截 所 有 请 求 --> 


<bean class="com.springmvc .interceptor .MYInterceptor"/> 


</mvc:interceptors> 


组 件 扫描 器 、 视 图 解析 器 在 前 面 章节 已 经 讲解 和 配置 过 ， 这 里 不 再 叙述 。 

(4) 在 chll 文件 夹 中 ， 创 建 一 个 hello.jsp 页 面 文件 ， 在 主体 部 分 编写 “拦截 器 执行 过 
程 完成 ! ”提示 信息 。 

(5) 重启 Tomcat， 在 浏览 器 访问 网 址 http:/localhost:8080/springmvc-6/hello， 程 序 正确 
运行 后 ， 浏 览 器 会 跳 转 到 hello.jsp 页 面 ， 此 时 控制 台 的 输出 结果 如 下 : 


MyInterceptor 拦截 器 执行 preHandle () 方 法 
Hello! Controller 控制 器 类 执行 nello () 方 法 
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MyInterceptor 拦截 器 执行 postHandle () 方 法 

MyInterceptor 拦截 器 执行 afterCompletion() 方法 

从 输出 结果 可 以 看 出 ， 程 序 首先 执行 了 拦截 器 类 中 的 preHandle0 方 法 ， 而 后 执行 了 控 
制 器 中 的 hello0 方 法 ， 最 后 分 别 执行 了 拦截 器 类 中 的 postHandle0 方 法 和 afterCompletion() 
方法 。 这 与 前 面 所 描述 的 单个 拦截 器 的 执行 顺序 是 一 致 的 。 


2. 多 个 拦截 器 的 执行 流程 


在 一 个 Web 工程 中 , 甚至 在 一 个 HandlerMapping 处 理 器 适配器 中 都 可 以 配置 多 个 拦截 
器 ， 每 个 拦截 器 都 按照 提前 配置 好 的 顺序 执行 。 但 需 注 意 的 是 ， 它 们 内 部 的 执行 规律 并 不 
像 多 个 普通 Java 类 一 样 ， 它 们 的 设计 模式 是 基于 “责任 链 ” 的 模式 。 我 们 知道 ， 拦 截 器 的 
preHandle 是 有 请 求 放行 或 拦截 的 规律 的 ,所 以 拦截 器 链 的 执行 首先 从 preHandle 方法 开始 ， 
逐步 执行 每 一 个 拦截 器 的 preHandle 方法 ， 若 是 某 一 个 拦截 器 的 preHandle 返回 false， 则 后 
面 拦 截 器 的 preHandle 方法 就 无 法 执行 了 。 与 此 同时 ，postHandle 与 afterCompletion 的 执行 
也 对 责任 链 中 的 其 他 拦截 器 的 执行 有 影响 , 其实 这 些 方法 就 是 紧 紧 围绕 Controller 的 执行 来 
根据 不 同 的 执行 周期 顺序 执行 的 。 

下 面 通过 图 例 描述 多 个 拦截 器 的 执行 流程 ， 假 设 有 两 个 拦截 器 MyInterceptorl 和 
MYyInterceptor2， 将 MyInterceptorl 配置 在 前 ， 如 图 11-12 所 示 。 


MylInterceptorl MYyInterceptor2 


MYyInterceptorl 
(preHandle) 
MYyInterceptorl 
(postHandle) 


Controller 


HandlerAdapter 
(Handle) 


MYyInterceptor2 
(preHandle) 


MYyInterceptor2 
(postHandle) 
MYyInterceptor2 
(afterCompletion) 


DispatcherServlet 
(render) 
11-12 ”多 个 拦截 器 的 执行 流程 


当 多 个 拦截 器 同时 工作 时 ， 它 们 的 preHandle0 方 法 会 按照 配置 文件 中 拦截 器 的 配置 顺 
序 执行 ， 而 它们 的 postHandle(0) 方 法 和 afterCompletion() 方 法 则 会 按照 配置 顺序 的 反 序 执行 。 

下 面 通过 修改 单个 拦截 器 执行 流程 的 实例 ， 来 演示 多 个 拦截 器 的 执行 ， 步 又 如 下 。 

(1) 在 com.springmvc.interceptor 包 中 ， 新 建 两 个 拦截 器 类 MylInterceptorl 和 
MyInterceptor2， 这 两 个 拦截 器 类 均 实现 了 HandlerInterceptor 接口 ， 其 代码 与 MyInterceptor 
相似 ， 主 要 就 是 在 输出 语句 中 体现 出 不 同 的 拦截 器 。 

(2) 在 springmvc.xml 的 配置 文件 中 ， 首 先 注释 掉 前 面 配置 的 MyInterceptor 拦截 器 ， 而 
后 在 <mvc:interceptors> 元 素 内 配置 上 面 所 定义 的 两 个 拦截 器 ， 代 码 如 下 : 


<mvc:interceptors> 


@< eR Et ed EN Te Ae ob eae ed A Ne He Ee eed 
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<!-- 定义 多 个 拦截 器 ， 顺 序 执行 --> 
<mvc:interceptor> <!-- 拦截 器 1 --> 
<mvc:mapping path="/**" /> <!-- 配置 拦截 器 作用 的 路 径 --> 
<!-- 定 义 在 <mvc:interceptor> 下 面 的 拦截 器 ， 表 示 对 匹配 路 径 请 求 才 进 行 拦截 --> 
<bean class="com.springmvc.interceptor.MyInterceptor1"/> 
</mvc:interceptor> 
<mvc:interceptor> <!-- 拦截 器 2 --> 
<mvc:mapping path="/hello" /> 
<bean class="com.springmvc.interceptor.MyInterceptor2"/> 
</mvc:interceptor> 
</mvc:interceptors> 


在 上 述 拦截 器 的 配置 代码 中 ，MyInterceptorl 拦截 器 会 作用 于 所 有 路 径 下 的 请 求 ， 
MyInterceptor2 拦截 器 会 作用 于 以 “/hello” 结 尾 的 请 求 。 

(3) 重启 Tomcat， 在 浏览 器 访问 网 址 http://localhost:8080/springmvc-6/hello， 程 序 正 确 
运行 后 ， 浏 览 器 会 跳 转 到 hellojsp 页 面 ， 控 制 台 输 出 内 容 如 下 : 

MyInterceptorl 拦截 器 执行 preHandle 方法 

MyInterceptor2 拦截 器 执行 preHandle 方法 

Hello! Controller 控制 器 类 执行 hello () 方 法 

MyInterceptor2 拦截 器 执行 postHandle 方法 

MyInterceptorl 拦截 器 执行 postHandle 方法 

MyInterceptor2 拦截 器 执行 aftercompletion 方法 

MyInterceptorl 拦截 器 执行 aftercompletion 方法 

通过 结果 可 以 观察 ， 两 个 拦截 器 的 执行 顺序 并 不 是 完全 线性 的 ， 而 是 根据 不 同 的 方法 
功能 穿插 运行 ， 这 也 是 拦截 器 链 设 计 模式 的 一 个 特点 。 


11.2.3 ”使 用 拦截 器 实现 用 户 登录 权限 验证 


本 节 通 过 一 个 示例 来 使 用 拦截 器 实现 用 户 登录 权限 验证 。 具 体 为 拦截 用 户 的 请 求 ， 判 
断 用 户 是 否 已 经 登录 ， 如 果 没有 登录 ， 则 跳 转 到 loginjjsp 的 登录 页 面 ， 并 给 出 提示 信息 ; 
如 果 用 户 已 经 登录 ， 则 放行 ， 如 果 账 号 和 密码 错误 ， 在 登录 页 面 给 出 相应 的 提示 ; 当 已 经 
登录 的 用 户 在 系统 主页 中 单 击 “ 退 出 ” 超 链 接 时 ， 系 统 同样 会 回 到 登录 页 面 。 该 示例 整个 
流程 的 执行 过 程 如 图 11-13 所 示 。 

在 springmvc-6 项 目 中 使 用 拦截 器 实现 用 户 登 录 权 限 验证 的 步骤 如 下 : 

(1) 在 com.springmvc.controller 包 中 ， 在 控制 器 UserController 类 中 ， 注 释 以 前 的 方法 ， 
并 在 该 类 中 定义 向 主页 跳 转 、 向 登录 页 跳 转 、 执 行 用 户 登 录 等 操作 的 方法 ， 代 码 如 下 : 

// 向 用 户 登 录 页 面 跳 转 方法 

@RequestMapping (value="/login",method=RequestMethod .GET) 

public String loginPage() { 


System.out.println ("用 户 从 login 请 求 到 登录 跳 转 login.jsp 页 面 "); 
return "login"; // 跳 转 到 登录 页 面 


} 

// 用 户 实现 登录 方法 

@RequestMapping (value="/login",method=RequestMethod.POST) 

public String login (User user,Model model,HttpSession session) { 
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String loginName=user.getLoginName (); 


String password=user.getPassword(); 
if (loginName!=null && loginName.equals ("yzpc") && password!=null && 
password.equals ("123456")) { 
System.out.println ("用 户 登 录 功能 实现 ") ; 
// 将 用 户 添加 到 session 中 保存 
session.setAttribute ("CURRENT USER", user); 
return "redirect:index"; // 重 定向 到 主页 面 的 跳 转 方法 
i 
model.addAttribute ("message", "账号 或 密码 错误 ， 请 重新 登录 ! "); 
return "login"; // 跳 转 到 登录 页 面 
} 
// 向 主页 跳 转 方法 
@RequestMapping (value="/index") 
public String indexPage() { 
System.out.println ("用 户 从 index 请 求 到 主页 跳 转 ijndex .jsp 页 面 "); 
return "index";  // 跳 转 到 主页 面 


} 

// 用 户 退 出 登录 方法 

@RequestMapping (value="/logout") 

Public String logout (HttpSession session) { 
session.invalidate(); // 清除 session 
System.out.println ("退出 功能 实现 ， 清 除 session， 重 定向 到 login 请 求 "); 
return "redirect:login";  ”// 重 定向 到 登录 页 面 的 跳 转 方 法 


主页 indexjsp 


显示 登录 用 户 信息 用 户 退 出 主页 


账号 或 密码 错误 


图 11-13 ”用户 登录 权限 验证 的 流程 


向 用 户 登 录 页 面 跳 转 方法 和 用 户 登 录 方 法 的 @RequestMapping 注解 的 value 属性 值 相 
同 , 但 method 属性 值 不 同 ， 因 为 超 链接 提交 使 用 GET 方式 ， 表 单 提交 使 用 POST 方式 。 在 
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用 户 登录 方法 中 , 通过 User 类 型 参数 获取 账号 和 密码 ,通过 让 语句 模拟 从 数据 库 获取 到 账 
户 和 密码 。 如 果 存 在 此 用 户 ， 将 信息 保存 在 Session 中 ， 并 重 定向 到 主页 ， 否 则 跳 转 到 登录 
页 面 。 
User 实体 类 已 经 定义 ， 组 件 扫描 器 、 视 图 解析 器 在 前 面 章 节 配置 过 ， 这 里 不 再 叙述 。 
(2) 在 com.springmvc.interceptor 包 中 ， 新 建 LoginInterceptor 的 拦截 器 类 ， 代 码 如 下 : 
// 登录 拦截 器 类 


Public class LoginInterceptor implements HandlerInterceptor { 
@override 
Public boolean preHandle (HttpServletRequest request, 
HttpServletResponse response, Object handler) throws Exception { 
// 获取 请 求 的 URL 
String url=request.getRequestURI(); 
if (!(url.contains ("Login")||url.contains ("login"))) { 
// 非 登录 请 求 ， 获 取 session， 判 断 是 否 有 用 户 数据 
if (request.getSession () .getRttribute ("CURRENT USER")!=null1) { 
return true; // 说 明 已 经 登录 ， 放 行 
}else { // 没 有 登录 ， 则 跳 转 到 登录 页 面 
request.setAttribute ("message"， "您 还 没有 登录 ， 请 先 登录 ! ") ; 
request .getRequestDispatcher 
("/chll/login.jsp") .forward (request, response); 
} 
jelse |{ 


return true; // 登录 请 求 ， 放 行 


' 
return false; // 默认 拦截 


} 
// 省 略 postHandle () 方 法 和 aftercompletion() 方 法 
} 
用 户 登 录 成 功 后 ， 会 将 用 户 信息 封装 到 user 对 象 中 ， 并 放置 在 全 局 的 session 会 话 对 象 
中 。 上 面 的 代码 中 ， 在 preHandle0 方 法 中 编写 了 控制 用 户 登录 权限 的 逻辑 。 首 先 判 断 请 求 
是 否 去 往 登 录 页 面 ， 如 果 是 则 直接 返回 true 放行 。 如 果 不 是 ， 则 检测 用 户 的 user 信息 是 否 
在 session 中 ， 如 果 不 在 ， 则 说 明 用 户 没 有 登录 ， 跳 转 至 login.jsp 页 面 。 如 果 session 中 包含 
user 对 象 ， 则 说 明 用 户 已 经 登录 ， 此 时 直接 返回 tue 放行 。 
(3) 在 springmvc.xml 的 配置 文件 中 ， 首 先 注释 前 面 配 置 过 的 拦截 器 ， 而 后 在 
<mve:interceptors> 元 素 内 配置 上 面 所 定义 的 LoginInterceptor 拦截 器 ， 代 码 如 下 : 
<!-- 配置 拦截 器 --> 


<mvc:interceptors> 


<mvc :interceptor> 
<mvc:mapping path="/**"/> <!-- /** 表 示 所 有 url 包括 子 url 路 径 --> 
<bean class="com.springmvc.interceptor.LoginInterceptor"/> 
</mvc:interceptor> 
</mvc:interceptors> 


在 上 述 拦截 器 的 配置 代码 中 ，LoginInterceptor 拦截 器 会 作用 于 所 有 路 径 下 的 请 求 。 
(4) 在 chll 文件 夹 中 ， 新 建 登 录 页 面 login.jsp 和 主页 面 index.jsp。 
在 login.jsp 登录 页 面 中 ， 编 写 一 个 用 于 实现 登录 操作 的 form 表单 ， 代 码 如 下 : 
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<body> 


<font color="red"> ${requestSscope.message }</font> <br><br> 
<formaction="${pageContext .request.contextPath}/login" method="post"> 
账号 : <input type="text" name="loginName"><br><br> 
密码 : <input type="password" name="password"><br><br> 
<input type="submit" value=" 登 录 "><br> 
</form> 
</body> 


在 index.jsp 主页 面 中 , 使 用 EL 表达 式 获取 用 户 信息 , 并 通过 一 个 超 链接 来 实现 “退出 ” 
功能 ， 代 码 如 下 : 
欢迎 : ${sessionScope.CURRENT USER.loginName} | 
<a href="$ {pageContext.request.contextPath }/logout"> 退 出 </a> 
(5) 重启 Tomcat， 在 浏览 器 访问 网 址 http://localhost:8080/springmve-6/index， 运 行 界面 
如 图 11-14 所 示 。 
从 图 中 可 以 看 出 ， 当 用 户 未 登录 而 直接 访问 主页 面 时 ， 访 问 就 会 被 拦截 器 拦截 ， 从 而 
跳 转 到 登录 页 面 ， 并 提示 用 户 “ 您 还 没有 登录 ， 请 先 登 录 ! ”。 如 果 在 登录 页 面 输入 错误 
的 账号 和 密码 ， 单 击 “ 登 录 ” 按 钮 后 ， 浏 览 器 的 运行 效果 如 图 11-15 所 示 。 


- 0O x 
@ 国 hapy/localhost8080 只 - C | 国王 杂 页 面 
文件 日 ”编辑 (E) ”可 看 V) 收藏 夫 (A) ”工具 中 帮助 (H) 


- 口 x 
@ 国 httpi//localhost;8080, 只 ~ C | 风 登 录 页 面 
文件 日 ” 妨 强 (E) ”查看 V) ”收藏 夫 (A) 工具 中 帮助 (H) 


您 还 没有 登录 ， 请 先 登录 ! 账号 或 密码 错误 ， 请 重新 登录 ! 
账号 ， 账号 ， 
密码 ， 密码 : 
登录 登录 
11-14 ”登录 页 面 11-15 ”账户 或 密码 错误 时 登录 页 面 


如 果 在 登录 页 面 输入 模拟 的 “yzpc” 账 号 和 “123456” 密 码 ， 单 击 “ 登 录 ” 按 钮 后 ， 浏 
览 器 会 跳 转 到 主页 面 ， 并 显示 “欢迎 : yzpc| 退出 ”的 提示 ， 如 图 11-16 所 示 。 
单 击 “ 退 出 ” 超 链 接 后 ， 即 可 退出 当前 系统 ， 系 统 会 从 主页 面 重新 定向 到 登录 页 面 。 
至 口 x 
@ 国 hapy/localhost8080 了 -6 国 主 证 
文件 昌 ” 编 祝 (E) ”前 看 VV) 收藏 夫 (A) 工具 四 帮助 (由 
欢迎 ，yzpc | 退出 


11-16 ”系统 主页 面 
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11.3 小 结 


本 章 介 绍 了 Spring MVC 的 国际 化 和 拦截 器 知识 。 对 于 Spring MVC 的 国际 化 ， 介 绍 
了 Spring MVC 的 国际 化 文件 messageSource、 国 际 化 语言 区 域 解析 器 接口 LocaleResolver 
以 及 该 接口 的 三 个 常用 实现 类 AcceptHeaderLocaleResolver 、SessionLocaleResolver 和 
CookieLocaleResolver 的 使 用 。 对 于 Spring MVC 的 拦截 器 , 介绍 了 如 何在 Spring MVC 项 目 
中 定义 和 配置 拦截 器 ， 讲 解 了 单个 拦截 器 和 多 个 拦截 器 的 执行 流程 ， 最 后 通过 一 个 用 户 登 
录 权 限 验 证 的 示例 讲解 了 拦截 器 的 实际 应 用 。 通 过 应 用 拦截 器 机 制 ，Spring MVC 框架 可 以 
使 用 可 插 拔 方式 管理 各 种 功能 。 
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MyBatis 作为 一 个 流行 的 持久 层 框架 ， 本 是 Apache 的 一 个 开源 项 目 iBatis，2010 年 这 
个 项 目 由 Apache Software Foundation 迁移 到 了 Google Code， 并 且 改 名 为 MyBatis。 


12.1 MyBatis 概述 


MyBatis 是 支持 普通 SQL 查询 、 存 储 过 程 和 高 级 映射 的 优秀 持久 层 框架 。MyBatis 几乎 
消除 了 所 有 的 JDBC 代码 和 参数 的 手工 设置 以 及 对 结果 集 的 检索 。MyBatis 可 以 使 用 简单 的 
XML 或 注解 来 配置 和 映射 基本 数据 类 型 ,将 接口 和 Java 的 POJO(Plain Old Java Objects, 普 
通 的 Java 对 象 ) 映 射 成 数据 库 中 的 记录 。 

对 比 持久 层 框架 Hibermate， 这 两 个 框架 都 是 ORM 对 象 关系 映射 框架 ， 都 是 用 于 将 数 
据 持 久 化 的 框架 技术 。 

Hiberante 较 深度 地 封装 了 JDBC， 对 开发 者 编写 SQL 的 能 力 要 求 不 高 ， 只 要 
语句 操作 对 象 即 可 完成 对 数据 持久 化 的 操作 。 另外 ey 
始 使 用 的 是 MySQL 数据 库 ， 现 在 决 使 用 Oracle 
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编写 SQL 语句 ,可 以 根据 需求 定制 SQL 语句 ,数据 优化 起 来 比 Hibernate 容易 得 多 。 但 Mybatis 
要 求 程序 员 编 写 SQL 的 能 力 要 比 Hibernate 高 , 且 可 移植 性 也 不 是 很 好 。 涉 及 大 数据 的 系统 
使 用 Mybatis 比较 好 ， 因 为 优化 方便 。 涉 及 的 数据 量 不 大 且 对 优化 要 求 不 高 的 系统 ， 可 以 使 
用 Hibernate。 


12.2 MyBatis 的 下 载 与 安装 


在 本 书 编写 时 , MyBatis 的 最 新 版 本 是 3.4.6, 本 书 所 讲解 的 MyBatis 框架 也 是 基于 这 个 
版 本 。 

读者 可 以 通过 官方 网 站 https://github.com/mybatis/mybatis-3/releases 下 载 这 个 版 本 的 
MyBatis，MyBatis 的 下 载 页 面 如 图 12-1 所 示 。 


D mybatis / mybatis-3 Oma ost me am Wie | 47289 


mybatis-3.4.6 


Asset: 


图 12-1 MyBatis 的 下 载 页 面 


单 击 mybatis-3.4.6.zip 链接 ， 就 可 以 下 载 此 版 本 的 MyBatis 框架 压缩 包 ， 该 压缩 包 的 文 
件 结构 如 图 12-2 所 示 。 


名称 
Bib 

了] UCENSE 

国 mybatis-3.4.6jar 1 
国 ybatis-346pdf 。 2018/3112 139 
] NOTICE 01717 


12-2 ”MyBatis 压缩 包 的 文件 结构 
lib 文件 夹 中 存放 mybatis-3.4.6 所 依赖 的 jar 包 (如 日 志 包 log4j-1.2.17.jar 等 )， 
mybatis-3.4.6.jar 是 MyBatis 必需 的 核心 包 ，mybatis-3.4.6.pdf 是 MyBatis 的 使 用 手册 。 
读者 还 可 以 从 网 站 http://mvnrepository.com/artifact/org.mybatis/mybatis 直接 下 载 
MyBatis 的 核心 包 。 


12.3 ”MyBatis 的 工作 原理 


在 使 用 MyBatis 框架 进行 数据 库 操作 之 前 ， 需 要 先 了 解 MyBatis 的 工作 原理 ，MyBatis 
框架 的 执行 流程 如 图 12-3 所 示 。 
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读 取 MyBatis 配置 文件 
mybatis-config.xml 


加 载 映射 文件 
mapper.xml 


创建 会 话 工厂 
SqlSessionFactory 


输入 参数 类 型 


创建 会 话 SqlSession 


MappedStatement 对 象 


输出 参数 类 型 


String、Integer 
等 基本 数据 类 型 


String、 Integer 
等 基本 数据 类 型 


Map、List 类 型 Map、List 类 型 


POJO 类 型 POJO 类 型 


图 12-3 MyBatis 框架 的 执行 流程 


从 图 12-3 可 以 看 出 ， 使 用 MyBatis 操作 数据 库 时 ， 大 致 经 过 如 下 几 个 步 又。 

(1) 读 取 MyBatis 配置 文件 mybatis-config xml。 

mybatis-config.xml 是 MyBatis 的 全 局 配置 文件 ， 名 称 不 固定 。 该 文件 中 配置 了 数据 源 、 
事务 等 MyBatis 运行 环境 。 

(2) 加 载 映射 文件 mapper.xml。 

mapper.xml 是 SQL 映射 文件 ， 该 文件 中 定义 了 数据 库 操作 的 SQL 语句 ， 需 要 在 
mybatis-config.xml 文件 中 加 载 。 

(3) 创建 会 话 工厂 。 

根据 MyBatis 的 配置 文件 创建 会 话 工厂 SqlSessionFactory。 

(4) 创建 会 话 。 

通过 会 话 工厂 SqlSessionFactory 创建 SqlSession 对 象 ， 该 对 象 提供 了 执行 SQL 的 所 有 
方法 。 

(5) 通过 Executor 操作 数据 库 。 

Executor 是 Mybatis 的 一 个 核心 接口 ， 它 与 SqlSession 绑 定 在 一 起 ， 每 个 SqlSession 都 
拥有 一 个 新 的 Executor 对 象 , 由 Configuration 创建 .SqlSession 内 部 通过 执行 器 操作 数据 库 ， 
增删 改 语句 通过 Executor 接口 的 update 方法 执行 ， 查 询 语句 通过 query 方法 执行 。 

(6) 输入 参数 和 输出 结果 的 映射 。 

在 执行 SQL 语句 前 ，Executor 执行 器 通过 MappedStatement 对 象 ， 将 传 入 的 Java 对 象 映 
射 到 SQL 语句 中 。 在 执行 SQL 语句 后 ，MappedStatement 对 象 将 执行 结果 映射 到 Java 对 象 。 

对 于 初学 MyBatis 的 人 来 说 ， 此 时 可 能 还 无 法 完全 理解 这 些 内 容 。 不 过 没有 关系 ， 接 
下 来 我 们 将 通过 案例 来 学 习 如 何 使 用 MyBatis 实现 数据 的 增删 改 查 。 
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12.4 ”MyBatis 的 增删 改 查 


在 Java 或 Java Web 项 目 中 添加 MyBatis 必需 的 核心 包 , 就 能 对 数据 表 进行 增删 改 查 操 
作 了 。 下 面 以 MySQL 数据 库 eshop 中 的 数据 表 user info 为 例 , 使 用 MyBatis 实现 数据 的 增 
删改 查 。 


12.4.1 查询 用 户 


查询 操作 通常 包括 单条 记录 的 精确 查询 和 多 条 记录 的 模糊 查询 ， 本 小 节 将 详细 讲解 如 
何 使 用 MyBatis 框架 实现 根据 用 户 编号 查询 用 户 、 根 据 用 户 名 模糊 查询 用 户 的 功能 。 


1. 根据 用 户 编号 查询 用 户 


根据 用 户 编号 查询 用 户 是 通过 数据 表 user_info 中 的 主键 字段 id 来 完成 的 ， 具体 实现 步 
又 如 下 。 

(1) 新 建 一 个 名 为 mybatisl 的 Java 项 目 ， 在 项 目 中 新 建文 件 夹 ib， 用 于 存放 项 目 所 需 
的 jar 包 。 

(2) 将 MyBatis 必需 的 核心 包 mybatis-3.4.6.jar 和 日 志 包 1og4j-1.2.17.jar 复制 到 项 目的 lib 
目录 中 ， 即 完成 了 MyBatis 的 安装 。 

(G3) 将 MySQL 的 驱动 包 也 复制 到 该 项 目的 lib 目录 中 ， 这 里 使 用 的 版 本 为 
Inysql-connector-java-S.1.18-bin.jar。 

(4) 选中 项 目 lib 目录 下 的 所 有 jar 包 ， 右 击 并 选择 Build Path 一 Add to Build Path 命令 ， 
将 这 些 jar 包 添 加 到 项 目的 构建 路 径 中 。 

(5) 创建 实体 类 。 

在 src 目录 下 创建 一 个 com.mybatis.pojo 包 ， 并 在 其 中 创建 实体 类 UserInfo.java( 对 应 数 
据 库 eshop 中 的 数据 表 user_info)。 在 UserInfo 类 中 声明 一 些 属 性 (对 应 数据 表 user_info 的 部 
分 字段 ), 以 及 与 这 些 属性 对 应 的 getter 和 setter 方 法 ,还 可 根据 需要 添加 构造 方法 和 toString0 
方法 。 

Package com.mybatis.pojo; 

Public class UserInfo { 


private int id; 
Private String userName; 


private String password; 
Private String realName; 
Private String sex; 
private String address; 
private String email; 
private String regDate; 
private int status; 
public int getId() { 
return id; 


Spring + Spring MVC + MyBatis 
框架 技术 精 讲 与 整合 案例 


public void setId(int id) { 
this.id = id; 


} 

// 此 处 省 略 了 其 他 属性 的 getter 和 setter 方法 

override 

public String toString() { 

return "UserInfo [id=" + id + ", userName=" + userName + ", password=" 

+ password + "] "7 

} 
} 


(6) 创建 SQL 映射 的 XML 文件 。 

在 src 目录 下 , 创建 一 个 com.mybatis mapper 包 ， 并 在 包 中 创建 SQL 映射 的 XML 文件 
UserInfoMapper.xml， 内 容 如 下 : 

<!DOCTYPE mapper 

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 


"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.UserIinfoMapper"> 


<!-- 根据 用 户 编号 查询 用 户 信息 --> 
<select id="findUserInfoById" parameterType="int" 
resultType="UserIinfo"> 
Select. 二 
from user info where id = #{id} 
</select> 

</mapper> 

映射 文件 UserInfoMapper.xml 是 一 个 XML 格式 文件 , 必须 遵循 相应 的 DTD 文件 规范 。 
mybatis-3-mapper.dtd 就 是 这 个 规范 文件 ， 它 规定 了 映射 文件 中 可 以 使 用 的 元 素 。 

映射 文件 以 <mapper> 作 为 根 结 点 ， 其 namespace 属性 用 于 指定 <mapper> 的 唯一 命名 空 
间 。 命名 空间 设置 格式 为 “ 包 名 +SQL 映射 文件 名 ”, 如 com.mybatis.mapper.UserInfoMapper。 

根 结 点 中 支持 insert、 update、delete、select、 cache、cache-ref、 resultMap、parameterMap 
和 sql 9 个 元 素 。 

<select> 元 素 用 于 映射 查询 语句 ， 其 id 属性 是 <select> 元 素 在 映射 文件 中 的 唯一 标识 符 ， 
这 里 设置 为 findUserInfoById; parameterType 属性 用 于 指定 传递 给 SQL 语句 的 参数 类 型 ， 
可 以 是 int、 long、String 等 类 型 , 也 可 以 是 复杂 类 型 (如 对 象 ), 这 里 设置 传 入 参数 类 型 为 int。 
在 <select> 元 素 映 射 的 查询 语句 中 ，#{} 表 示 一 个 占 位 符 ， 相 当 于 ?，#{id} 表 示 该 占 位 符 接 收 
的 参数 名 为 id; resultType 属性 用 于 指定 返回 结果 的 类 型 ， 这 里 设置 为 UserInfo， 表 示 将 查 
询 结果 封装 到 UserInfo 类 型 的 对 象 中 。 

(7) 创建 属性 文件 db.properties。 

在 src 目录 下 创建 属性 文件 db.properties， 配 置 MySQL 数据 库 的 连接 信息 ， 如 下 所 示 : 

jdbc.driver=com.mysql.jdbc.Driver 

jdbc.url=jdbc:mysql://localhost:3306/eshop 


jdbc.username=root 
jdbc.password=123456 


在 属性 文件 db.properties 中 ， 通 过 jdbc.driver 指定 数据 库 驱 动 名 ，jdbc.url 指定 数据 库 


@< de 
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URL，jdbc.username 指定 数据 库 用 户 名 ，jdbc.password 指定 用 户 密码 。 
(8) 创建 MyBatis 的 核心 配置 文件 。 
在 src 目录 下 ,创建 MyBatis 的 核心 配置 文件 mybatis-config.xml， 如 下 所 示 : 


<?xml] version="1.0" encoding="UTF-8" ?> 
<!1DOCTYPE configuration 
PUBLIC "-//mybatis.org//DTD Config 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-config.dtd"> 
<configuration> 
<!-- 加 载 属性 文件 --> 
<properties resource="db.properties"></properties> 
<!-- 给 包 中 的 类 注册 别名 --> 
<typeAliases> 
<package name="com.mybatis.pojo" /> 
</typeAliases> 
<!-- 配置 环境 --> 
<environments default="development"> 
<!-- 配置 一 个 id 为 development 的 环境 --> 
<environment id="development"> 
<!-- 使 用 JDBC 事务 --> 
<transactionManager type="JDBC" /> 
<!-- 数据 库 连接 池 --> 
<dataSource type="POOLED"> 
<property name="driver" value="${jdbc.driver}" /> 
<property name="url" value="${jdbc.url}" /> 
<property name="username" value="${jdbc.username}" /> 
<property name="password" value="${jdbc.password}" /> 
</dataSource> 
</environment> 
</environments> 
<!-- 引用 映射 文件 --> 
<mappers> 
<mapper resource="com/mybatis/mapper/UserIinfoMapper.xml" /> 
</mappers> 
</configuration> 


在 MyBatis 配置 文件 中 ， 也 必须 遵循 相应 的 DTD 文件 规范 。mybatis-3-config.dtd 就 是 
这 个 规范 文件 ， 它 规定 了 该 配置 文件 中 可 以 使 用 的 元 素 。 

MyBatis 配置 文件 以 <configuration> 元 素 作为 根 结 点 , 根 结 点 支持 properties、typeAliases、 
environments、mappers 等 子 元 素 。 

<properties> 元 素 用 于 加 载 属性 文件 db.properties; <typeAliases> 元 素 用 于 给 包 中 的 类 注 
册 别 名 ， 注 册 后 可 以 直接 使 用 别名 ， 而 不 用 使 用 全 限定 的 类 名 (就 是 不 用 包含 包 名 )。 

<environments> 元 素 用 于 环境 配置 ， 也 就 是 数据 源 配置 。<environments> 元 素 体 中 可 以 
配置 多 个 数据 库 环境 ，default 属性 用 于 指定 默认 使 用 的 某 种 环境 的 ID 值 。 

每 个 数据 库 环境 通过 <environment> 子 元 素 配 置 ， 其 id 属性 用 于 指定 该 环境 的 ID 值 。 
在 <environment> 元 素 体 中 ， 使 用 <transactionManager> 子 元 素 配置 事务 管理 ， 其 type 属性 用 
于 指定 事务 管理 类 型 ，type 取 值 可 以 是 JDBC( 基 于 JDBC 的 事务 ) 和 MANAGED( 托 管 的 事 
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务 )。 设 置 成 JDBC ，MyBatis 依赖 于 从 数据 源 得 到 的 连接 来 管理 事务 ， 即 使 用 
java.sql.Connection 对 象 完成 对 事务 的 提交 、 回 滚 。 设 置 成 MANAGED，MyBatis 自身 不 会 
去 实现 事务 管理 ， 它 会 让 容器 来 管理 事务 的 整个 生命 周期 。 

在 <environments> 元 素 体 中 ， 使 用 <dataSource> 子 元 素 声明 数据 源 。 其 type 属性 用 于 指 
定数 据 源 的 类 型 ，type 取 值 可 以 是 UNPOOLED、POOLED 和 JNDI。 设 置 成 UNPOOLED 
时 ，MyBatis 会 为 每 一 次 数据 库 操 作 创 建 一 个 新 的 连接 ， 并 关闭 该 连接 。 设 置 成 POOLED 
时 ，MyBatis 会 创建 一 个 数据 库 连 接 池 ， 数据 库 操作 时 从 连接 池 中 获取 一 个 连接 ， 操 作 完 成 
后 再 将 连接 归还 给 连接 池 。 设 置 成 INDI 时 ，MyBatis 从 配置 好 的 JNDI 数据 源 获 取 数 据 库 
连接 。 并 发 用 户 规模 不 大 时 用 UNPOOLED, 测试 和 开发 过 程 一 般 用 POOLED,， 实际 运行 使 
用 INDI。 

<mappers> 元 素 用 于 指定 MyBatis 映射 文件 的 位 置 ,每 个 映射 文件 的 位 置 通过 <mapper> 
子 元 素 的 resource 属性 来 指定 。 

(9) 创建 测试 类 。 

创建 JUnit 测试 类 MybatisTestjava， 存 放 在 com.mybatis.test 包 中 。 其 代码 如 下 : 


package com.mybatis.test; 
import java.io.IOException; 
import java.io.Inputstream; 
import org.apache.ibatis.io.Resources; 
import org.apache.ibatis.session.SqlSession; 
import org.apache.ibatis.session.SqlSessionFactory; 
import org.apache.ibatis.session.SqlSessionFactoryBuilder; 
import org.junit.After; 
import org.junit.Before; 
import org.junit.Test; 
import com.mybatis.pojo.UserInfo7 
public class MybatisTest { 
private SqlSessionFactory sqlSessionFactory; 
Private SqlSession sqlSession; 
@Before 
public void init() { 
// 读 取 mybatis 配置 文件 


String resource = "mybatis-config.xml"; 
Inputstream inputstream; 
try { 


// 得 到 配置 文件 流 
inputstream = Resources.getResourceAsStream(resource); 
// 根据 配置 文件 信息 ， 创 建 会 话 工厂 
sqlSessionFactory = new 
SqlSessionFactoryBuilder() .build(inputstream); 
// 通过 工厂 得 到 sqlsession 
sqlSession = sqlSessionFactory.openSession(); 
} catch (IOException e) { 
e.printstackTrace (); 


} 


// 根据 id 查询 用 户 


@< Sd ee a ed 
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@Test 

public void testFindUserInfoById() { 
// 通过 sqlsession 执行 映射 文件 中 定义 的 sQL, 并 返回 映射 结果 
UserInfo ui = sqlSession.selectone ("findUserInfoById", 1); 
// 打印 输出 结果 
System.out.println(ui.tostring()); 

» 

@After 

public void destroy() { 
// 提交 事务 


sqlSession.commit (); 
// 关闭 sqlsession 
sqlSession.close(); 


} 


在 测试 类 MybatisTest 中 ， 首 先 添加 init0 方 法 ， 并 使 用 @Before 注解 修饰 。JUnit4 使 用 
Java5 中 的 @Before 注解 , 用 于 初始 化 , init0 方 法 对 于 每 一 个 测试 方法 都 要 执行 一 次 ,在 init0 
方法 中 ， 先 根据 MyBatis 配置 文件 构建 SqlSessionFactory， 再 通过 SqlSessionFactory 创建 
SqlSession。 

在 测试 类 MybatisTest 中 ， 接 着 添加 destroy0 方 法 ， 并 使 用 @After 注解 修饰 。JUnit4 使 
用 Java5 中 的 @After 注解 , 用 于 释放 资源 。 destroy0 方 法 对 于 每 一 个 测试 方法 都 要 执行 一 次 。 
在 destroy0 方 法 中 ， 先 执行 事务 提交 ， 再 释放 SqlSession 资源 。 

在 测试 类 MybatisTest 中 ， 每 一 个 用 @Test 注解 修饰 的 方法 称 为 测试 方法 ， 它 们 的 调用 
顺序 为 @Before 一 @Test 一 @Aftter。 

在 测试 方法 testFindUserInfoById 中 , 调用 SqlSession 对 象 的 selectOne 方法 执行 查询 操 
作 。selectOne 方 法 的 第 一 个 参数 是 映射 文件 UserInfoMapperxml 中 定义 的 <select> 元 素 的 id， 
这 里 为 findUserInfoById， 表 示 将 执行 这 个 id 所 标识 的 <select> 元 素 中 的 SQL 语句 ; 第 二 个 
参数 是 查询 所 需 的 参数 ， 这 里 查询 编号 为 1 的 用 户 信息 。 执 行 selectOne 方法 后 ，MyBatis 
会 将 查询 结果 封装 到 UserInfo 对 象 并 返回 。 

(10) 测试 结果 。 

MyBatis 默认 使 用 log4 输出 日 志 信 息 ， 为 了 能 在 控制 台 输 出 SQL 语句 ， 需 要 在 项 目的 
src 目录 下 创建 文件 log 和 .xml， 文 件 内 容 可 以 查阅 项 目 源 代码 。 

执行 测试 类 MybatisTest 中 的 testFindUserInfoById() 方 法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info where id = ? 
DEBUG [main] - ==> Parameters: 1(Integer) 
DEBUG [main] - <== Totals 1 


UserInfo [id=1l, userName=tom, password=123456] 
从 控制 台 输 出 可 以 看 出 ， 使 用 MyBatis 成 功 查询 出 了 编号 为 1 的 用 户 信息 。 
2. 根据 用 户 名 模糊 查询 用 户 


根据 用 户 名 模糊 查询 用 户 是 通过 数据 表 user info 中 的 字段 userName 来 完成 的 , 具体 实 
现 步骤 如 下 : 
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(1) 在 映射 文件 UserInfoMapper.xml 中 ， 添 加 根据 用 户 名 模糊 查询 用 户 的 SQL 语句 ， 
如 下 所 示 : 
<!-- 根据 用 户 名 模糊 查询 用 户 --> 


<select id="findUserIinfoByUserName" parameterType="String™" 
resultType="UserInfo"> 


select * from user info where userName like 
CONCAT (CONCAT ('%',#{userName}),'%') 
</select> 


在 id 为 findUserInfoByUserName 的 <select> 元 素 中 ， 传 入 SQL 查询 语句 的 参数 类 型 为 
String， 参 数值 是 用 户 名 。SQL 语句 执行 结果 返回 的 是 一 个 List 集合 类 型 ，resultType 属性 
设置 的 返回 类 型 为 集合 中 元 素 的 类 型 , 这 里 为 UserInfo。 在 SQL 查询 语句 中 , 使 用 CONCAT 
函数 进行 字符 串 的 拼接 ， 这 样 既 能 实现 模糊 查询 ， 又 能 防止 SQL 注入 。 

(2) 在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testFindUserInfoByUserName()， 代 码 
如 下 : 

// 根据 用 户 名 模糊 查询 用 户 

@Test 

public void testFindUserInfoByUserName() { 

// 执行 映射 文件 中 定义 的 SQL, 并 返回 映射 结果 
List<UserInfo> uis = sqlSession.selectList ("findUserIinfoByUserName", 
"m"); 
for (UserInfo ui : uis) { 
// 打印 输出 结果 


System.out.println(ui.tostring()); 


} 


根据 用 户 名 模糊 查询 的 结果 可 能 有 多 条 记录 ， 上 述 代 码 调用 了 SqlSession 对 象 的 
selectList 方法 执行 查询 操作 。 如 果 数 据 表 中 没有 数据 返回 , 则 返回 空 集合 , 而 不 会 返回 null; 
如 果 有 数据 返回 ， 则 返回 集合 对 象 。 最 后 再 使 用 for 循环 输出 集合 中 的 对 象 。 

(3) 执行 testFindUserInfoByUserName() 方 法 ， 控 制 台 输 出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info where userName like 
CONCAT (CONCAT ('%',?),'%"') 

DEBUG [main] - ==> Parameters: ml(String) 

DEBUG [main] - <== Total:s 2 


UserInfo [id=1l, userName=tom, password=123456] 
UserInfo [id=3, userName=my, password=123456] 


从 控制 台 输出 可 以 看 出 , 使 用 MyBatis 成 功 查询 出 了 用 户 名 中 包含 m 的 两 条 用 户 信息 。 
12.4.2 ”添加 用 户 


在 MyBatis 映射 文件 中 ， 插 入 操作 是 通过 <insert> 元 素来 实现 的 。 在 映射 文件 
UserInfoMapper.xml 中 ， 添 加 用 户 的 SQL 语句 如 下 : 
<!-- 添加 用 户 --> 


@< Se 
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<insert id="addUserInfo" parameterType="UserInfo"> 


insert into 


User_info (userNamerpassword) values (#{userName},#{password}) 


</insert> 


在 id 为 addUserInfo 的 <insert> 元 素 中 ，parameterType 属性 设置 为 UserInfo， 表 示 传 入 
SQL 插入 语句 的 参数 类 型 为 UserInfo, 将 UserInfo 类 型 的 对 象 作为 参数 传递 到 SQL 语句 中 。 
#{userName} 和 #{password} 占 位 符 接收 的 参数 名 分 别 来 自 UserInfo 对 象 的 userName 和 


password 属性 。 


在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testAddUserInfo0， 代 码 如 下 : 


// 添加 用 户 
@Test 


Public void testAddUserInfo() { 
// 创建 UserInfo 对 象 ui 


UserInfo ui = 


new UserInfo() 7 


// 向 对 象 ui 中 添加 数据 

ui.setUserName ("mybatis1"); 

ui.setPassword("123456"); 

// 执行 sqlsession 的 insert 方法 ,返回 结果 是 SQL 语句 受 影响 的 行 数 


int result = sqlSession.insert ("addUserInfo", ui); 
if (result > 0) { 


System.out. 


} else { 


System.out. 


} 
} 


println ("插入 成 功 "); 


println ("插入 失败 ") ; 


在 testAddUserInfo 方法 中 ， 首 先 创建 了 UserInfo 对 象 ni， 并 在 ui 中 添加 了 用 户 名 和 密 
码 两 个 数据 ， 然 后 调用 SqlSession 对 象 的 insert 方法 执行 插入 操作 ， 返 回 结果 是 SQL 语句 
受 影 响 的 行 数 。 执 行 testAddUserInfo0 方 法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> 
Values (?,?) 

DEBUG [main] - ==> 
DEBUG [main] - <== 
插入 成 功 


打开 数据 表 user_info， 
记录 ， 如 图 12-4 所 示 。 


12.4.3 ”修改 用 户 


Preparing: insert into user info(userName,password) 
Parameters: mybatisl(String)，123456 (String) 
Updates: 1 
加 |ia |uaerName |password 
| 1|zom 123456 
可 以 看 到 表 中 新 增 了 一 条 用 户 ” 台 2 john 123456 
口 3my 123456 
加 lI 43] 123456 
口 5|1xf 123456 
到 | 613 123456 
BC rybatisl 123456 


在 MyBatis 映射 文件 中 ， 更 新 操作 是 通过 <update> 元 图 124 数据 表 user_info 
素来 实现 的 。 在 映射 文件 UserInfoMapper.xml 中 ， 修 改 用 


户 信 息 的 SQL 语句 如 下 : 
<!-- 修改 用 户 信息 --> 


<update id="updateUserInfo" parameterType="UserInfo"> 
update user info set 
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userName=#{userName}, password=#{password} where id=#{id} 


</update> 


在 id 为 updateUserInfo 的 <update> 元 素 中 , parameterType 属性 设置 为 UserInfo, 表示 传 
入 SQL 更 新 语句 的 参数 类 型 为 UserInfo, 将 UserInfo 类 型 的 对 象 作为 参数 传递 到 SQL 语句 
中 。#{fuserName} 、#{password} 和 # fid} 占 位 符 接 收 的 参数 名 分 别 来 自 UserInfo 对 象 的 
userName、password 和 id 属性 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testUpdateUserImnfo0， 代 码 如 下 : 


// 修改 用 户 
@Test 
public void testUpdateUserInfo() { 
// 加 载 编号 为 7 的 用 户 
UserInfo ui = sqlSession.selectOne ("findUserIinfoById", 7); 
// 重新 设置 用 户 密码 
ui.setPassword("123123"); 
// 执行 sqlsession 的 update 方法 ,返回 结果 是 SQL 语句 受 影响 的 行 数 
int result = sqlSession.update ("updateUserInfo", ui); 
if (result > 0) { 
System.out.println ("更 新 成 功 ") ; 
System.out.println (ui); 
} else { 
System.out.println(" 更 新 失败 ") 


} 
} 


在 testUpdateUserInfo() 方 法 中 ,首先 加 载 编号 为 7 的 用 户 对 象 ui, 然后 重新 设置 用 户 密 
最 后 执行 sqlSession 的 update 方法 进行 更 新 操作 。 
执行 testUpdateUserInfo0 方 法 ， 控 制 台 输 出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info where id = ? 
DEBUG [main] 一 


于 


> Parameters: 7(Integer) 


DEBUG [main] 一 Totals: 1 

DEBUG [main] - ==> Preparing: update user info set userName=?, password=? 
where id=? 

DEBUG [main] - ==> Parameters: mybatisl (string), 123123 (String), 7(Integer) 
DEBUG [main] - <== Updates: 1 


更 新 成 功 


UserInfo [id=7, userName=mybatisl, password=123123] 


从 控制 台 输出 可 以 看 出 ， 使 用 MyBatis 成 功 更 新 了 id 为 7 的 用 户 信息 。 


12.4.4 ”删除 用 户 


在 MyBatis 映射 文件 中 ， 删 除 操作 是 通过 <delete> 元 素来 实现 的 。 在 映射 文件 
UserInfoMapper.xml 中 ， 删 除 用 户 信息 的 SQL 语句 如 下 : 


<!-- 根据 用 户 编号 删除 用 户 --> 
<delete id="deleteUserInfo" parameterTYype="int"> 
delete from user info 


@< Soe a a 


第 12 章 MyBatis 入 门 


where id=#{id} 
</delete> 


在 id 为 deleteUserInfo 的 <delete> 元 素 中 , parameterType 属性 设置 为 int, 表示 传 入 SQL 
删除 语句 的 参数 类 型 为 nt， 这 里 将 用 户 编号 作为 参数 传递 到 SQL 语句 中 。#id} 占 位 符 接 
收 的 参数 名 为 id。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testDeleteUserInfo， 该 方法 用 于 删除 编号 
为 7 的 用 户 信息 ， 代 码 如 下 : 

// 删除 用 户 

@Test 

Public void testDeleteUserInfo() { 

// 执行 sqlsession 的 delete 方法 ,返回 结果 是 SQL 语句 受 影响 的 行 数 
int result = sqlSession.delete("deleteUserInfo", 7); 
if (result > 0) { 
System.out.println ("成 功 删除 了 " + result + "条 记录 ")，; 
} else { 
System.out.println ("插入 删除 "); 
} 
} 


执行 testDeleteUserInfo 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] 一 
DEBUG [main] 一 
DEBUG [main] - < 


成 功 删除 了 1 条 记录 

再 次 查看 数据 表 user_ info， 会 看 到 之 前 添加 的 编号 为 7 的 用 户 记 录 被 成 功 删 除了 。 至 
此 ， 使 用 MyBatis 框架 实现 数据 表 user_info 的 增删 改 查 操作 就 讲解 完了 ， 读 者 可 以 结合 
前 讲解 的 MyBatis 工作 原理 来 理解 这 个 示例 。 


==> Preparing: delete from user info where id=? 


=> Parameters: 7(Integer) 
== Updates: 1 


12.5 ”使 用 resultMap 属性 映射 查询 结果 


在 上 述 示例 中 ， 实 体 类 UserInfo 中 的 属性 名 与 数据 表 user_info 中 的 字段 名 相同 ， 如 果 
属性 名 与 数据 表 的 字段 名 不 相同 ， 那 么 就 需要 使 用 resultMap 属性 来 进行 结果 集 的 映射 。 
将 项 目 mybatisl 复制 并 命名 为 mybatis2， 再 导入 到 Eclipse 开发 环境 中 。 
修改 实体 类 UserInfojava， 将 其 属性 重新 命名 ， 使 得 属性 名 与 数据 表 user_info 的 字段 
名 不 同 。 
Package com.mybatis.pojo; 
public class Users { 
private int uid; 
private String uname; 
private String upass; 
// 省 略 属性 的 getter 和 setter 方法 
// 省 略 tostring () 方 法 
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在 映射 文件 UserInfoMapper.xml 中 ， 修 改 id 为 fndUserInfoById 的 <select> 元 素 ， 修 改 
后 的 映射 文件 如 下 : 


<1DOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.UserIinfoMapper"> 
<!-- 根据 用 户 编号 获取 用 户 信息 --> 
<select id="findUserIinfoById" ParameterTYype="int" 
resultMap="userInfoMap"> 
Select * 
from user info where id = #{id} 
</select> 
<resultMap type="UserInfo" id="userInfoMap"> 
<id property="uid" column="id" /> 
<result property="uname" column="userName" /> 
<result property="upass" column="password" /> 
</resultMap> 
</mapper> 


在 <select> 元 素 中 ， 通 过 resultMap 属性 引用 该 映射 文件 中 一 个 id 为 userInfoMap 的 
<resultMap> 元 素 ， 来 完成 查询 结果 的 映射 。 在 <resultMap> 元 素 中 ，type 属性 指定 映射 结果 
的 类 型 ， 这 里 为 UserInfo; <id> 和 <result> 子 元 素 用 来 将 数据 表 user_info 的 字段 映射 到 
UserInfo 对 象 的 属性 ， 不 同 的 是 ，<id> 元 素 用 来 映射 标识 属性 。 

修改 测试 类 MybatisTest， 只 保留 一 个 测试 方法 testFindUserInfoById0。 执 行 该 测试 方 
法 ， 控 制 台 输出 如 下 : 

DEBUG [main] - ==> Preparing: select * from user info where id = ? 

DEBUG [main] - ==> Parameters: 1(Integer) 

DEBUG [main] - <== Totals 下 

UserInfo [id=1, userName=tom, password=123456] 

可 以 看 出 ， 当 数据 表 字段 名 与 实体 类 属性 名 不 一 致 时 ， 使 用 resultMap 属性 可 以 实现 查 
询 结果 的 映射 。 


12.6 ”使 用 Mapper 接口 执行 SQL 


在 测试 类 MybatisTest 中 , 通过 sqlSession 对 象 调 用 selectOne selectList、 delete 和 update 
等 方法 。 在 这 些 方法 中 ， 需 要 指定 映射 文件 中 执行 语句 的 id( 如 findUserInfoById)。 如 果 id 
的 拼写 出 现 错误 ， 只 有 到 运行 时 才能 发 现 。 为 此 ，MyBatis 提供 了 另 一 种 编程 方式 ， 即 使 用 
Mapper 接口 执行 SQL, 从 而 避免 上 述 情 况 的 出 现 , 同时 也 更 符合 Java 面向 接口 编程 的 习惯 。 
但 是 ， 使 用 Mapper 接口 开发 时 需要 遵循 如 下 规范 : 


@ ”映射 文件 中 的 namespace 与 Mapper 接口 的 类 路 径 相 同 。 

@ ”在 Mapper 接口 中 ， 方 法 名 和 映射 文件 中 定义 的 执行 语句 的 id 相同。 

e@ 方法 的 输入 参数 类 型 和 映射 文件 中 定义 的 执行 语句 的 parameterType 的 类 型 相同 。 
e@ ”方法 输出 参数 类 型 和 映射 文件 中 定义 的 执行 语句 的 resultType 的 类 型 相同 。 
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还 是 以 数据 表 user_info 的 增删 改 查 操作 为 例 ， 使 用 Mapper 接口 编程 的 步骤 如 下 。 

(1) 将 项 目 mybatisl 复制 并 命名 为 mybatis3， 再 导入 到 Eclipse 开发 环境 中 。 

(2) 在 com.mybatis.mapper 包 中 ， 创 建 接口 UserInfoMapperjava， 并 声明 方法 ， 如 下 所 示 : 
Package com.mybatis.mapper; 

import com.mybatis.pojo.UserIinfo; 

public interface UserInfoMapper { 


UserInfo findUserIinfoById (int id); 
} 


由 于 映射 文件 中 的 namespace 属性 设置 为 com.mybatis.mapper.UserInfoMapper， 因 此 
Mapper 接口 的 类 路 径 必须 与 之 相同 。 这 里 创建 了 接口 UserInfoMapper.java， 并 将 其 放置 在 
com.mybatis.mapper 包 中 。 在 接口 UserInfoMapper.java 中 ， 声 明了 一 个 findUserInfoById(int 
id) 方 法 ， 方 法 名 为 映射 文件 中 一 个 <select> 元 素 的 id; 方法 的 输入 参数 类 型 与 该 <select> 元 
素 的 parameterType 的 类 型 相同 ; 方法 的 输出 参数 类 型 与 该 <select> 元 素 的 resultType 的 类 型 
相同 。 

(3) 在 测试 类 MybatisTest 中 ， 修 改 测试 方法 testFindUserInfoById0， 如 下 所 示 : 

// 根据 id 查询 用 户 

@Test 

public void testFindUserInfoById() { 

// 获得 UserInfoMapper 接口 的 代理 对 象 

UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper .class) 
// 直接 调用 接口 的 方法 ， 查 询 编号 为 1 的 UserInfo 对 象 

UserInfo ui = uim.findUserInfoById(1) 7 

// 打印 输出 结果 

System.out.println(ui.toString()) 7 


， 


MyBatis 通过 动态 代理 的 方式 实现 Mapper 接口 ， 在 测试 方法 testFindUserInfoById0 中 ， 
首先 调用 sqlSession 对 象 的 getMapper 方法 获得 UserInfoMapper 接口 的 代理 对 象 ; 然后 直接 
调用 接口 的 方法 ， 查 询 编号 为 1 的 UserInfo 对 象 ， 最 后 打印 输出 结果 。 

执行 测试 方法 testFindUserInfoById0， 控 制 台 输 出 如 下 : 


DEBUG [main] - ==> Preparing: Select * from user info where id = ? 
DEBUG [main] - ==> Parameters: 1(Integer) 
DEBUG [main] - <== Total: 1 


UserInfo [id=l1l, userName=tom, password=123456] 


从 控制 台 输 出 可 以 看 出 ， 使 用 Mapper 接口 成 功 地 获取 了 用 户 信息 。 
12:7 结 
本 章 介绍 了 MyBatis 框架 的 概念 、 下 载 与 安装 和 工作 原理 ， 并 结合 数据 表 user_info 的 


增删 改 查 操作 ， 详 细 讲 解 了 MyBatis 框架 的 基本 用 法 。 通 过 本 章 的 学 习 ， 相 信 读 者 已 经 对 
MyBatis 框架 有 了 初步 的 了 解 ， 下 一 章 将 学 习 更 多 有 关 MyBatis 框架 的 知识 。 
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MyBatis 不 仅 支持 单 张 表 的 增删 改 查 ， 还 支持 多 张 表 之 间 的 关联 操作 。 表 之 间 的 关联 关 
系 通常 包括 一 对 一 关联 、 一 对 多 关联 和 多 对 多 关联 。 表 之 间 的 关联 反映 到 对 象 层面 ， 就 是 
对 象 间 的 关联 关系 。MyBatis 提供 了 关联 映射 ， 可 以 很 好 地 处 理 对 象 间 的 关联 关系 ， 极 大 简 
化 持久 层 数 据 的 操作 。 


13.1 一 对 一 关联 映射 


在 现实 生活 中 ， 一 个 人 只 能 有 一 个 身份 证 ， 一 个 身份 证 只 能 对 应 一 个 人 ， 人 和 身份 证 
之 间 就 是 一 对 一 关系 。 以 人 和 身份 证 为 例 ， 使 用 MyBatis 框架 处 理 它们 之 间 的 一 对 一 关联 
关系 的 步 又 如 下 。 

(1) 创建 数据 表 。 
在 数据 库 eshop 中 ， 
和 插入 测试 数据 的 SQ 
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# 插 入 测试 数据 
INSERT INTO idcard(cno) VALUES(320100197001010001); 
INSERT INTO idcard(cno) VALUES(320100197001010002); 
INSERT INTO idcard(cno) VALUES(320100197001010003); 
# 创 建 数据 表 person 
CREATE TABLE Person( 
id INT PRIMARY KEY AUTO INCREMENT, 
NAME VARCHAR(20), 
age INT, 
sex VARCHAR(2), 
cid INT, 
FOREIGN KEY(cid) REFERENCES idcard(id) 
); 
# 插 入 测试 数据 
INSERT INTO person (NAME,age sex,cid) VALUES('zhangsan',22,' 男 ',1); 
INSERT INTO person (NAME,age, sex,cid) VALUES ('1ili',21, ' 女 ',2); 
INSERT INTO person (NAME,age, sex,cid) VALUES('wangwu',22,' 男 ', 3); 


(2) 将 项 目 mybatisl 复制 并 命名 为 mybatis4， 再 导入 到 Eclipse 开发 环境 中 。 
(3) 创建 实体 类 。 
在 com.mybatis.pojo 包 中 ， 创 建 实体 类 Idcard 和 Person。 实 体 类 Idcard 的 代码 如 下 : 


Package com.mybatis.pojo; 
public class Idcard { 
private int id; 


private String cno; 
// 省 略 属性 的 getter 和 setter 方法 
override 
public String toString() { 
return "Idcard [id=" + id + ", cno=" + cno + "] "7 


} 
实体 类 Person 的 代码 如 下 : 


Package com.mybatis.pojo; 
public class Person { 
private int id; 
private String name; 
private int age; 
private String sex; 
// 关联 属性 
private Idcard idcard; 
// 省 略 属性 的 getter 和 setter 方法 
QQoverride 
public String toString() { 
return "Person [id=" + id + " name=" + name + ", age=" + age + ", 


sex=" + sex + ", idcard=" + idcard + "]"; 


» 
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(4) 创建 MyBatis 映射 文件 。 
在 com.mybatis mapper 包 中 , 创建 映射 文件 IdcardMapper.xml 和 PersonMapper.xml。 映 
射 文件 IdcardMapper.xml 的 内 容 如 下 : 


<!IDOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.IdcardMapper"> 
<!-- 根据 id 查询 身份 证 信息 --> 
<select id="findIdcardBylId" parameterType="int" resultType="Idcard"> 
select * from idcard where id=#{id} 
</select> 
</mapper> 


在 映射 文件 IdcardMapper.xml 中 ， 添 加 了 一 个 id 为 fndIdcardById 的 <select> 元 素 ， 根 
据 id 从 数据 表 idcard 中 查询 身份 证 信息 ， 返 回 Idcard 类 型 对 象 。 
映射 文件 PersonMapper.xml 的 内 容 如 下 : 


<!DOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.PersonMapper"> 
<!-- 根据 id 查询 个 人 信息 ， 返 回 resultMap --> 
<select id="findPersonById" parameterType="int" resultMap="personMap"> 
select * from person where id = #{id} 
</select> 
<!-- 查询 语句 查询 结果 映射 --> 
<resultMap type="Person" id="personMap"> 
<id property="id" column="id" /> 
<result property="name" column="name" /> 
<result property="age" column="age" /> 
<result property="sex" column="sex" /> 
<!-- 一 对 一 关联 映射 --> 
<association property="idcard" column="cid" 
select="com.mybatis .mapper.IdcardMapper.findIdcardBYId" 
javaType="Idcard" /> 
</resultMap> 
</mapper> 


在 PersonMapper.xml 中 ,添加 了 一 个 id 为 findPersonByld 的 <select> 元 素 ， 由 于 实体 类 
Person 中 除了 简单 的 属性 id、name、age 和 sex 之 外 ， 还 有 一 个 关联 的 对 象 属性 idcard， 所 
以 需要 通过 映射 文件 中 id 为 personMap 的 <resultMap> 元 素 完成 查询 结果 的 映射 。 

在 id 为 personMap 的 <resultMap> 元 素 中 ， 除 了 使 用 <id> 和 <result> 子 元 素 映 射 数据 表 
person 的 基本 字段 与 实体 类 Person 的 基本 属性 外 ， 还 通过 <association> 元 素来 映射 Person 
与 Idcard 对 象 之 间 一 对 一 的 关联 关系 。 

在 <association> 元 素 中 , select 属性 可 以 让 MyBatis 找到 com.mybatis.mapper.IdcardMapper 
命名 空间 下 id 为 findIdcardByld 的 元 素 ,执行 该 元 素 中 的 SQL 语句 , 传 入 的 参数 来 自 column 
属性 指定 的 值 cid， 查 询 出 的 关联 结果 被 封装 到 property 属性 指定 的 Idcard 类 型 的 对 象 
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idcard 中 。 
(5) 创建 Mapper 接口 。 
在 com.mybatis.mapper 包 中 ， 创 建 接口 PersonMapper， 并 声明 方法 ， 其 代码 如 下 : 
Package com.mybatis.mapper; 
import com.mybatis.pojo.Person; 
public interface PersonMapper { 


Person findPersonById(int id); 
} 


这 里 使 用 Mapper 接口 执行 SQL 语句 ,在 接口 PersonMapper 中 声明 一 个 findPersonByld 
方法 ， 该 方法 名 为 映射 文件 PersonMapper.xml 中 一 个 <select> 元 素 的 id。 

(6) 引用 映射 文件 。 

在 配置 文件 mybatis-config.xml 中 , 引入 映射 文件 IdcardMapper.xml 和 PersonMapperxml， 
如 下 所 示 : 

<!-- 引用 映射 文件 --> 


<mappers> 


<mapper resource="com/mybatis/mapper/IdcardMapper.xml" /> 
<mapper resource="com/mybatis/mapper/PersonMapper.xml" /> 
</mappers> 


(7) 测试 一 对 一 关联 映射 。 
在 测试 类 MybatisTest 中 ,添加 测试 方法 testFindPersonById0， 并 使 用 @Test 注解 修饰 ， 
从 数据 表 person 中 获取 记录 的 同时 ， 获 取 关 联 的 数据 表 idcard 中 的 记录 。 其 代码 如 下 : 
@Test 
public void testFindPersonById() { 
// 获得 PersonMapper 接口 的 代理 对 象 
PersonMapper pm = sqlSession.getMapper (PersonMapper.class); 
// 直接 调用 接口 的 方法 ， 查 询 id=1 的 Person 对 象 
Person person = pm.findPersonById(1) 


System.out.println (person.tostring()); 


} 


在 测试 方法 testFindPersonById0 中 ， 首 先 调用 sqlSession 对 象 的 getMapper 方法 获得 
PersonMapper 接口 的 代理 对 象 ， 然后 直接 调用 接口 的 方法 ， 查 询 编号 为 1 的 Person 对 象 ; 


最 后 打印 输出 结果 。 
执行 testFindPersonById0 方 法 ， 控 制 台 输出 如 下 : 
DEBUG [main] - ==> Preparing: select * from person where id = ? 


DEBUG [main] 一 
DEBUG [main] 一 
DEBUG [main] 一 
DEBUG [main] 一 Total: 1 

DEBUG [main] 一 Pats 起 

Person [id=1l, name=zhangsan, age=22, sex= 男 ， idcard=Idcard [id=1, 
cno=320100197001010001]] 


Parameters: 1(Integer) 
> Preparing: select * from idcard where id=? 
Parameters: 1(Integer) 
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可 以 看 到 ， 查 询 Person 对 象 时 关联 的 Idcard 对 象 也 查询 出 来 了 。 


13.2 一 对 多 关联 映射 


在 实际 开发 中 ， 一 对 多 关联 关系 要 比 一 对 一 更 为 常见 。 例 如 ， 订 单 与 订单 明细 之 间 就 
是 一 对 多 关系 。 一 个 订单 有 多 条 明细 信息 ， 一 条 订单 明细 信息 对 应 一 个 订单 。 同 样 ， 商 品 
类 别 与 商品 之 间 也 是 一 对 多 关系 。 一 个 商品 类 别 对 应 多 个 商品 ， 一 个 商品 属于 一 个 类 别 。 

以 数据 库 eshop 中 的 商品 类 别 表 type 和 商品 表 product info 为 例 , 针对 数据 查询 、 插 入 
和 删除 操作 ， 使 用 MyBatis 框架 处 理 它们 之 间 的 一 对 多 关联 关系 。 


1. 数据 查询 
数据 查询 是 根据 商品 类 型 编号 从 数据 表 type 中 查询 商品 类 型 , 并 查询 关联 的 商品 列表 。 


其 具体 实现 步骤 如 下 。 
(1) 将 项 目 mybatisl 复制 并 命名 为 mybatis5， 再 导入 到 Eclipse 开发 环境 中 。 


(2) 创建 实体 类 。 
在 com.mybatis.pojo 包 中 ， 创 建 实 体 类 ProductInfo 和 Type。 实 体 类 ProductInfo 的 代码 


如 下 : 


package com.mybatis.pojo; 
public class ProductInfo { 
private int id; 
private String code; 
private String name; 
// 关联 属性 
private Type type; 
// 省 略 属性 的 getter 和 setter 方法 
override 


public String toString() { 
return "ProductInfo [id=" + id + ", code=" + code + ", name=" + name 


+ mn 
} 
} 


为 了 简化 代码 ， 实 体 类 ProductInfo 中 只 添加 了 与 数据 表 product_info 的 部 分 字段 对 应 
的 属性 。 
实体 类 Type 的 代码 如 下 : 


Package com.mybatis.pojo; 
import java.util.List; 
public class Type { 
private int id; 
Private String name; 
// 关联 集合 属性 
Private List<ProductInfo> pis; 


// 省 略 属 性 的 getter 和 setter 方法 


Qoverride 
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public String toString() { 


return "Type [id=" + id + ", name=" + name + ", pis=" + pis + "]"; 
} 


(3) 创建 MyBatis 映射 文件 。 
在 com.mybatis.mapper 包 中 , 创建 映射 文件 ProductInfoMapper.xml 和 TypeMapper.xml。 
映射 文件 ProductInfoMapper.xml 的 内 容 如 下 : 


<?xml] Version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.ProductIinfoMapper"> 
<!-- 根据 类 型 编号 查询 商品 信息 --> 
<select id="findProductIinfoById" parameterType="int" 
resultType="ProductIinfo"> 
select * from product info where tid = #{id} 
</select> 
</mapper> 


在 ProductInfoMapper.xml 文件 中 , 定义 了 id 为 findProductInfoByld 的 <select> 元 素 , 根 
据 类 型 编号 查询 商品 信息 。 
映射 文件 TypeMapper.xml 的 内 容 如 下 : 


<?xml] Version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.TypeMapper"> 
<!-- 根据 商品 类 型 编号 查询 商品 类 型 信息 --> 
<select id="findTypeById" parameterType="int" resultMap="typeMap"> 
select * 
from type where id = #{id} 
</select> 
<!-- 查询 结果 映射 --> 
<resultMap type="Type" id="typeMap"> 
<id property="id" column="id" /> 
<result property="name" column="name" /> 
<!-- 一 对 多 关联 映射 --> 
<collection property="pis" column="id" select= 
"com.mybatis.mapper.ProductInfoMapper.findProductInfoById"> 
</collection> 
</resultMap> 
</mapper> 


在 映射 文件 TypeMapper.xml 中 ， 定 义 了 id 为 fndTypeByld 的 <select> 元 素 ， 根 据 商 品 
类 型 编号 查询 商品 类 型 信息 ， 查 询 结 果 通 过 id 为 ypeMap 的 <resultMap> 元 素 进行 映射 。 

在 <resultMap> 元 素 中 ， 先 通过 <id> 与 <result> 子 元 素 实现 Type 类 型 基本 属性 的 映射 ， 
再 通过 <collection> 子 元 素 实现 一 对 多 关联 映射 。 
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在 <collection> 元 素 中 ，property 属性 用 于 指定 关联 属性 ， 这 里 设置 为 Type 类 型 关联 的 
ProductInfo 类 型 的 集合 属性 pis; select 属性 用 于 指定 获取 关联 属性 值 时 需要 执行 的 SQL 语 
名 的 id， 这 里 设置 为 com.mybatis.mapper.ProductInfoMapper， 表 示 MyBatis 将 会 执行 
com.mybatis.mapper 包 下 ProductInfoMapper 接口 中 定义 的 方法 findProductInfoById, 即 执行 
映射 文件 ProductInfoMapper.xml 中 定义 的 id 为 findProductInfoByld 的 <select> 元 素 中 的 SQL 
语句 ;column 属性 用 于 指定 传 入 上 述 <select> 元 素 中 的 SQL 语句 的 参数 名 ， 这 里 设置 为 id， 
表示 商品 类 型 编号 。 

(4) 创建 Mapper 接口 。 

在 com.mybatis.mapper 包 中 ， 创 建 接口 TypeMapper， 并 声明 方法 ， 其 代码 如 下 : 

Package com.mybatis.mapper; 

import com.mybatis.pojo.Type; 


public interface TypeMapper { 
Type findTypeById (int id); 


} 

在 接口 TypeMapper 中 声明 一 个 findTypeByld 方法 ,方法 名 为 映射 文件 TypeMapper.xml 
中 定义 的 <selec 人 > 元 素 的 id。 

(5) 引用 映射 文件 。 

在 配置 文件 mybatis-configxml 中 ， 引 入 映射 文件 ProductInfoMapper.xml 和 
TypeMapper.xml， 如 下 所 示 : 

<!-- 引用 映射 文件 --> 

<mappers> 

es resource="com/mybatis/mapper/ProductIinfoMapper.xml" /> 


<mapper resource="com/mybatis/mapper/TypeMapper.xml" /> 
</mappers> 


(6) 测试 一 对 多 关联 映射 。 

在 测试 类 MybatisTest 中 ， 添 加 测试 方法 testFindTypeById0， 并 使 用 @Test 注解 修饰 ， 
从 数据 表 type 获取 记录 的 同时 ， 获 取 关 联 的 数据 表 product info 中 的 记录 。 其 代码 如 下 : 

// 一 对 多 关联 映射 : 查询 数据 


@Test 

public void testFindTypeById() { 
// 获得 TypeMapper 接口 的 代理 对 象 
TypeMapper tm = sqlSession.getMapper (TypeMapper.class); 
// 直接 调用 接口 的 方法 ， 查 询 id=1 的 Type 对 象 
Type type = tm.findTypeById(1) 
System.out.println(type.tostring()); 

} 


执行 testFindTypeById0 方 法 ， 控 制 台 输 出 如 下 所 示 : 


DEBUG [main] 一 
DEBUG [main] 
DEBUG [main] 一 
DEBUG [main] - ====> Parameters: 1(Integer) 


@< a dd a ed 


==> Preparing: select * from type where id = ? 


> Parameters: 1(Integer) 
==> Preparing: select * from product info where tid = ? 
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DEBUG [main] - <==== Total: 6 

DEBUG [main] - <== Total: 1 

Type [id=1, name= 电 脑 ， pis=[ProductInfo [id=1, code=1378538, 
name=AppleMJVE2CH/A], ProductIinfo [id=2, code=1309456, 

name=ThinkPadE450C (20EHO0O001CD)], ProductIinfo [id=3, code=1999938, name= 联 
想 小 新 300 经 典 版 ] ，ProductInfo [id=4，code=1466274，name= 华 硕 Fx50JX]， 
ProductInfo [id=5, code=1981672，name= 华 硕 FL5800], ProductInfo [id=6, 
code=1904696，name= 联 想 G50-70M] ] ] 


从 控制 台 输 出 可 以 看 出 ，MyBatis 执行 了 查询 商品 类 型 的 SQL 语句 后 ， 又 执行 了 根据 
商品 类 型 编号 查询 商品 信息 列表 的 SQL 语句 。 
在 映射 文件 TypeMapper xml 中 , 一 对 多 关联 映射 通过 执行 另外 一 个 SQL 映射 语句 来 返 
回 预期 的 复杂 类 型 ， 即 引用 外 部 定义 好 的 SQL 语句 块 ， 这 种 关联 映射 查询 方式 也 称 为 嵌 套 
查询 。 
此 外 ，MyBatis 还 提供 了 另 一 种 关联 映射 查询 方式 一 嵌 套 结果 ， 它 通过 霸 套 结果 映射 
来 处 理 联 结 结果 集 的 重复 子 集 。 
还 是 以 类 别 表 type 和 商品 表 product_ info 的 一 对 多 关联 查询 为 例 , 使 用 嵌 套 结果 查询 方 
式 的 步骤 如 下 。 
(1) 在 映射 文件 TypeMapperxml 中 ， 编 写 使 用 丹 套 结果 查询 方式 进行 一 对 多 关联 查询 
的 配置 ， 如 下 所 示 : 
<!-- 使 用 嵌 套 结果 查询 方式 实现 一 对 多 关联 查询 --> 
<select id="findTypeById2" parameterType="int" resultMap="typeMap2"> 
select 
t.id tid, t.name tname, pi.* from type t,product info pi where 
pi.tid=t.id and t.id=#{id} 
</select> 
<resultMap type="Type" id="typeMap2"> 
<id property="id" column="tid" /> 
<result property="name" column="tname" /> 
<!-- 一 对 多 关联 映射 --> 
<collection property="pis" ofType="ProductInfo"> 
<id property="id" column="id" /> 
<result property="code" column="code" /> 
<result property="name" column="name" /> 
</collection> 
</resultMap> 


在 映射 文件 TypeMapper.xml 中 , 添加 了 一 个 id 为 fmdTypeById2 的 <select> 元 素 。 在 这 
个 <select> 元 素 中 ， 使 用 嵌 套 结果 的 方式 定义 了 一 个 根据 商品 类 型 编号 查询 商品 类 型 及 其 关 
联 的 商品 信息 列表 的 select 语句 。 当 关联 查询 的 字段 名 相同 时 ， 需 要 使 用 别名 加 以 区 分 。 这 
里 的 tid 和 tname 是 数据 表 type 中 字段 id 和 name 的 别名 ,从 而 与 product_info 表 的 id 和 name 
字段 区 分 。 

select 语句 的 执行 结果 通过 id 为 typeMap2 的 <resultMap> 元 素 进行 映射 。 在 <resultMap> 
元 素 中 ， 先 通过 <id> 和 <result> 子 元 素 映 射 Type 类 型 对 象 的 基本 属性 id 和 name， 再 通过 
<collection> 子 元 素 映 射 关联 的 ProductInfo 类 型 的 集合 属性 pis。<collection> 元 素 的 ofType 
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属性 用 于 指定 关联 的 集合 pis 中 的 元 素 类 型 。 
(2) 在 接口 TypeMapper 中 ， 添 加 一 个 方法 findTypeById2， 如 下 所 示 : 


Type findTypeById2 (int id) 7 


(3) 添加 测试 方法 。 
在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testFindTypeById20， 并 使 用 @Test 注解 
修饰 ， 如 下 所 示 : 


@Test 
public void testFindTypeById2() { 
// 获得 TypeMapper 接口 的 代理 对 象 
TypeMapper tm = sqlSession.getMapper (TypeMapper.class); 
// 直接 调用 接口 的 方法 ， 查 询 id=1 的 Type 对 象 
Type type = tm.findTypeById2 (1); 
System.out.println (type.tostring()); 
} 


执行 测试 方法 testFindTypeById20， 控 制 台 输出 与 testFindTypeById0 方 法 执行 结果 相 
同 。 至 此 ， 以 数据 库 eshop 中 的 商品 类 别 表 type 和 商品 表 product_info 为 例 ， 使 用 嵌 套 查询 
和 棋 套 结果 两 种 查询 方式 实现 了 一 对 多 关联 查询 。 

2. 数据 插入 


数据 插入 操作 要 实现 将 数据 同时 插入 数据 表 type 和 product info 中 , 具体 实现 步骤 如 下 。 
(1) 在 映射 文件 TypeMapperxml 中 ， 编 写 将 数据 插入 数据 表 type 的 配置 ， 如 下 所 示 : 
<!-- 向 type 表 插入 数据 --> 
<insert id="addType" parameterType="Type"> 
<!-- 插入 数据 , 并 获得 刚 插入 数据 表 type 的 记录 id --> 
<selectKey keyProperty="id" resultType="int" order="AFTER"> 
SELECT 
LAST_INSERT_ID() AS ID 
</selectKey> 
insert into type (name) values (#{name}) 
</insert> 


在 映射 文件 TypeMapper.xml 中 ， 添 加 了 一 个 id 为 addType 的 <insert> 元 素 。 在 这 个 
<insert> 元 素 中 ， 定 义 了 一 个 向 数据 表 type 中 插入 记录 的 insert 语句 ， 并 通过 <selectKey> 子 
元 素 获 取 刚 插入 数据 表 type 的 记录 id。 

在 <selectKey> 元 素 中 ， 定 义 了 一 个 获取 刚 插 入 的 自动 增长 的 id 值 的 SELECT 语句 。 
keyProperty 属性 用 于 指定 将 这 个 SELECT 语句 的 执行 结果 赋值 给 Type 类 型 对 象 的 哪个 属 
性 ， 这 里 为 id; resultType 属性 用 于 指定 执行 结果 类 型 ， 这 里 为 int; order 属性 可 以 被 设置 
为 BEFORE 或 AFTER。 如 果 设 置 为 BEFORE， 则 先 选择 主键 并 设置 keyProperty， 然 后 执 
行 插入 语句 ; 如 果 设 置 为 AFTER， 则 先 执行 插入 语句 ,然后 是 设置 keyProperty。 像 MySQL 
这 种 支持 自 增 类 型 的 数据 库 中 ，order 需要 设置 为 AFTER 才 会 取 到 正确 的 值 。 

(2) 在 接口 TypeMapper 中 ， 添 加 一 个 addType 方法 ， 如 下 所 示 : 


@< Sa ed a a a a a 
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void addType (Type type); 


(3) 在 映射 文件 ProductInfoMapper.xml 中 ,编写 将 数据 插入 数据 表 product_info 的 配置 ， 
如 下 所 示 : 
<!-- 向 product info 表 插 入 数据 --> 


<insert id="addProductInfo"”parameteIrMap="addProductInfoPMap"> 
insert into 
product infol(code,name,tid) values (#{code},#{name},#{type.id}) 
</insert> 
<parameterMap type="ProductInfo" id="addProductIinfoPMap"> 
<parameter property="code" /> 
<parameter property="name" /> 
<parameter property="type.id" /> 
</parameterMap> 


在 映射 文件 ProductInfoMapper.xml 中 ,添加 了 一 个 id 为 addProductInfo 的 <insert> 元 素 。 
在 这 个 <insert> 元 素 中 ,定义 了 一 个 向 数据 表 product info 插入 记录 的 insert 语句 。 由 于 这 条 
insert 语句 有 多 个 参数 且 实 体 类 中 的 属性 和 数据 库 中 的 字段 不 对 应 ， 因 此 通过 parameterMap 
属性 指定 传 入 insert 语句 的 参数 ， 这 里 设置 为 addProductmfoPMap， 即 引用 当前 映射 文件 中 
一 个 id 为 addProductInfoPMap 的 <parameterMap> 元 素 。 

在 <parameterMap> 元 素 中 ，type 属性 指定 SQL 语句 中 的 参数 来 自 于 哪个 实体 对 象 ， 
<parameter> 子 元 素 的 property 属性 进一步 指定 参数 来 自 于 实体 对 象 的 哪个 属性 。 

(4) 在 com.mybatis.mapper 包 中 ， 创 建 ProductInfoMapper 接口 ， 并 添加 一 个 
addProductInfo 方法 ， 如 下 所 示 : 


Package com.mybatis.mapper; 

import com.mybatis.pojo.ProductInfo7 

public interface ProductIinfoMapper { 
void addProductInfo (ProductInfo pi); 

} 


(5) 添加 测试 方法 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testAddType0， 并 使 用 @Test 注解 修饰 ， 
向 数据 表 type 中 插入 记录 的 同时 向 product info 表 插 入 记录 。 

// 添加 数据 


@Test 

public void testAddType() { 
// 创建 Type 对 象 
Type type = new Type(); 
type.setName ("打印 机 "); 
// 获得 TypeMapper 接口 的 代理 对 象 
TypeMapper tm = sqlSession.getMapper (TypeMapper.class); 
// 直接 调用 接口 的 方法 ， 保 存 Type 对 象 
tm.addType (type); 
// 创建 两 个 ProductInfo 对 象 
ProductInfo pil = new ProductIinfo(); 
ProductInfo pi2 = new ProductIinfo(); 
pilssetCcode (111111*)s 
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pil.setName ("HP1306"); 
pi2.setCode ("222222"); 

pi2.setName ("HP11103"); 

// 设置 关联 属性 

pil.setType (type); 

pi2.setType (type); 

// 获得 ProductInfoMapper 接口 的 代理 对 象 
ProductIinfoMapper pm = sqlSession.getMapper (ProductIinfoMapper.class); 
// 直接 调用 接口 的 方法 ， 保 存 两 个 ProductInfo 对 象 
pm.addProductInfo (pil1); 
pm.addProductInfo (pi2); 


} 


在 测试 方法 testAddType0 〇 中， 首先 创建 一 个 Type 对 象 ， 通 过 获得 的 TypeMapper 接口 
的 代理 对 象 ， 直 接 调用 接口 的 方法 将 Type 对 象 中 的 数据 保存 到 数据 表 type; 然后 创建 两 个 
ProductInfo 对 象 ， 并 设置 关联 属性 type， 通 过 获得 的 ProductInfoMapper 接口 的 代理 对 象 ， 
直接 调用 接口 的 方法 将 两 个 ProductInfo 对 象 中 的 数据 保存 到 数据 表 product info。 

执行 测试 方法 testAddType0， 控 制 台 输出 如 下 所 示 : 


DEBUG [main] - ==> Preparing: insert into type (name) values (?) 

DEBUG [main] - > Parameters: 打印 机 (string) 

DEBUG [main] - Updates: 1 

DEBUG [main] 一 > Preparing: SELECT LAST INSERT ID() AS ID 

DEBUG [main] - > Parameters: 

DEBUG [main] 一 Totals 王 

DEBUG [main] - ==> Preparing: insert into product info(code,name,tid) 


values(?, ?,?) 
DEBUG [main] - 
DEBUG [main] 一 


==> Parameters: 111111 (string), HP1306(String), 6(Integer) 
Updates: 1 


DEBUG [main] - ==> Preparing: insert into product _ infol(code,name,tid) 
values(?, ?,?) 

DEBUG [main] - ==> Parameters: 222222(String), HP11103(String), 6(Integer) 
DEBUG [main] - <== Updates: 1 


此 时 ， 数 据 表 type 中 添加 了 一 条 记录 ， 如 图 13-1 所 示 。product_info 表 添 加 了 两 条 关 
联 的 记录 ， 如 图 13-2 所 示 。 
加 jia lecae aa cd 呵 
口 b 9 1143562 海尔 BCD-2165 
| 器 | 10|1560207 | 海尔 BCD-258W 
| 口 | 111721668 | 海信 (Hisens 
品 
加 | 


12 823125 ”海信 BCD-211T 
13 111111 HP1306 


| 


LE 器 | 14|222222 |HP11103 
图 13-1 表 type 中 插入 的 记录 13-2 表 product_info 中 插入 的 记录 
3. 数据 删除 
数据 删除 操作 要 实现 从 数据 表 type 删 除 记录 时 ,将 关联 表 product info 中 的 记录 也 删除 ， 
其 具体 实现 步骤 如 下 。 


@< SD 
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(1) 在 映射 文件 TypeMapperxml 中 ， 编 写 删除 数据 的 配置 ， 如 下 所 示 : 
<!-- 删除 数据 --> 


<delete id="deleteTypeById" parameterType="int"> 
delete from product info where tid = #{id}; 
delete from type where id = #{id}; 

</delete> 


在 id 为 deleteTypeById 的 <delete> 元 素 中 ， 定 义 了 两 条 delete 语句 ， 第 一 条 delete 语句 
从 关联 表 product_info 中 删除 记录 ， 第 二 条 delete 语句 从 主 表 type 中 删除 记录 。 多 条 SQL 
语句 之 间 用 分 号 隔 开 。 由 于 MySQL 默认 没有 开启 批量 执行 SQL 语句 的 开关 ， 因 此 无 法 一 
次 执行 多 条 SQL 语句 ， 那 么 如 何 开启 呢 ? 只 需 在 设置 MySQL 连接 的 url 时 ， 加 上 
allowMultiQueries 参数 ， 并 设置 为 tue 即 可 。 打 开 db.properties 文件 ， 修 改 jdbc.url 属性 值 ， 
如 下 所 示 : 


jdbc.url=jdbc:mysql://localhost:3306/eshop?allowMultiQueries=true 


(2) 在 接口 TypeMapper 中 ， 添 加 一 个 deleteTypeById 方法 ， 如 下 所 示 : 

int deleteTypeById (int id) 7 

(3) 添加 测试 方法 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testDeleteTypeById0， 并 使 用 @Test 注解 
修饰 ， 删 除 编号 为 6 的 商品 类 型 ， 同 时 删除 关联 的 商品 信息 。 


// 删除 数据 
@Test 
public void testDeleteTypeById() { 
// 获得 TypeMapper 接口 的 代理 对 象 
TypeMapper tm = sqlSession.getMapper (TYPeMapper .class) 7 
// 直接 调用 接口 的 方法 ， 删 除 编号 为 6 的 商品 类 型 , 同时 删除 关联 的 商品 信息 
int result = tm.deleteTypeById (6); 
if (result > 0) { 
System.out.println ("删除 成 功 "); 
} else { 
System.out.println ("删除 失败 "); 
时 
} 


执行 测试 方法 testDeleteTypeById0， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: delete from product info where tid = ?7 delete 
from type where id = ?7 

DEBUG [main] - ==> Parameters: 6(Integer), 6(Integer) 

DEBUG [main] - <== Updates: 2 

删除 成 功 


此 时 ， 打 开 数 据 表 type， 可 以 看 到 编号 为 6 的 商品 类 型 信息 被 成 功 删 除了 ; 同时 数据 
表 product info 中 tid 为 6 的 商品 信息 也 被 成 功 删 除 。 

至 此 , 以 数据 表 type 和 product info 之 间 的 一 对 多 关联 映射 为 例 , 使 用 MyBatis 实现 了 
数据 查询 、 插 入 和 删除 操作 。 
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13.3 多 对 多 关联 映射 


在 实际 开发 中 ， 多 对 多 关联 关系 也 比较 常见 。 例 如 ， 订 单 与 商品 之 间 就 是 多 对 多 关系 。 
一 个 订单 可 以 包含 多 个 商品 ， 一 个 商品 可 以 属于 多 个 订单 。 同 样 ， 管 理 员 与 系统 功能 之 间 
也 是 多 对 多 关系 。 一 个 管理 员 可 以 拥有 多 个 功能 权限 ， 一 个 系统 功能 可 以 属于 多 个 用 户 。 

以 数据 库 eshop 中 的 管理 员 表 admin_info 和 系统 功能 表 functions 为 例 ， 它 们 之 间 通 过 
中 间 表 powers 来 关联 ， 这 个 中 间 表 分 别 与 adtmin_ info 和 functions 构成 多 对 一 关联 。 中 间 表 
powers 以 aid 和 fid 作为 联合 主键 ， 其 中 ，aid 字段 作为 外 键 参照 admin_info 表 的 id 字段， 
fid 字段 作为 外 键 参照 functions 表 的 id 字段 。 

以 数据 查询 操作 为 例 ， 使 用 MyBatis 框架 处 理 它 们 之 间 的 多 对 多 关联 关系 ， 其 具体 实 
现 步骤 如 下 。 

(1) 将 项 目 mybatisl 复制 并 命名 为 mybatis6， 再 导入 到 Eclipse 开发 环境 中 。 

(2) 创建 实体 类 。 

在 com.mybatis.pojo 包 中 , 创建 实体 类 AdminInfo 和 Functions。 其 中 , 实体 类 AdminInfo 
的 代码 如 下 : 


Package com.mybatis.po; 

import java.util.HashSset; 

import java.util.Set7 

public class AdminInfo { 
private int id; 
private String name; 
// 关联 的 属性 
private List<Functions> fs; 
// 省 略 属性 的 getter 和 setter 方法 
// 省 略 有 参 构造 和 无 参 构造 方法 

// 省 略 toSstring () 方 法 

} 


实体 类 Functions 的 代码 如 下 : 


Package com.mybatis.po; 
import java.util.Hashset; 
import java.util.Set7 
public class Functions { 
private int id; 
private String name; 
// 省 略 属性 的 getter 和 setter 方法 
// 省 略 有 参 构造 和 无 参 构 造 方法 
// 省 略 tostring () 方 法 


} 


(3) 创建 MyBatis 映射 文件 。 
在 commybatismapper 包 中 ， 创 建 映 射 文件 FunctionsMapperxml 和 
AdminInfoMapper.xml。 其 中 ， 映 射 文件 FunctionsMapperxml 的 代码 如 下 : 


@< ed a 
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<!IDOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.FunctionsMapper"> 
<!-- 根据 管理 员 ia 获取 其 功能 权限 列表 --> 
<select id="findFunctionsByAid" parameterType="int™" 
resultType="Functions"> 
select * from functions f where id in ( 
select fid from powers where aid = #{id} 
) 
</select> 
</mapper> 


在 FunctionsMapper.xml 文件 中 ， 定 义 了 一 个 id 为 findFunctionsByAid 的 <select> 元 素 ， 
根据 管理 员 id 获取 其 功能 权限 列表 。 由 于 管理 员 和 系统 功能 是 多 对 多 的 关系 ， 数 据 库 中 使 
用 了 一 个 中 间 表 powers 维护 多 对 多 关联 关系 。 此 处 使 用 了 一 个 子 查询 ， 首 先 根据 管理 员 id 
到 中 间 表 powers 中 查询 出 所 有 的 功能 权限 id， 然 后 再 根据 功能 权限 id 到 functions 表 中 查 
询 出 所 有 的 功能 权限 信息 ， 并 将 这 些 信 息 封 装 到 Functions 对 象 中 。 

创建 映射 文件 AdminInfoMapper.xml 的 代码 如 下 : 


<!DOCTYPE mapper 
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd"> 
<mapper namespace="com.mybatis.mapper.AdminInfoMapper"> 
<!-- 根据 管理 员 id 查询 管理 员 信息 --> 
<select id="findAdminInfoById" parameterType="int" 
resultMap="adminInfoMap"> 
select * from admin info where id = #{id} 
</select> 
<resultMap type="AdminInfo" id="adminInfoMap"> 
<id property="id" column="id" /> 
<result property="name" column="name" /> 
<!-- 多 对 多 关联 映射 --> 
<collection property="fs" ofType="Functions" column="id" 
select="com.mybatis.mapper.FunctionsMapper.findFunctionsByAid"> 
</collection> 
</resultMap> 
</mapper> 


在 映射 文件 AdminInfoMapper.xml 中 ， 定 义 了 一 个 id 为 fndAdminInfoById 的 <select> 
元 素 , 根据 管理 员 id 获取 管理 员 信息 。 由 于 AdminInfo 类 型 对 象 除 了 基本 的 属性 id 和 name 
之 外 ， 还 有 一 个 关联 的 集合 属性 代 ， 所 以 返回 的 是 一 个 <resultMap> 元 素 。 由 于 人 是 一 个 
List<Functions> 类 型 的 集合 ， 所 以 id 为 adminInfoMap 的 <resultMap> 元 素 中 使 用 了 
<collection> 元 素来 映射 多 对 多 关联 关系 。<collection> 元 素 的 select 属性 表示 会 找到 
com.mybatis.mapper 包 下 映射 文件 FunctionsMapper.xml 中 定义 的 id 为 findFunctionsByAid 
的 <select> 元 素 ， 执 行 该 元 素 中 的 SQL 语句 ， 参 数 来 自 于 column 属性 指定 的 id 值 (管理 员 
id)， 查 询 到 的 关联 结果 被 封装 到 property 属性 指定 的 List<Functions> 类 型 的 对 象 ff 中 。 
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(4) 创建 Mapper 接口 。 
在 com.mybatis.mapper 包 中 ， 创 建 接口 FunctionsMapper， 并 声明 方法 ， 代 码 如 下 : 


Package com.mybatis.mapper; 


import java.util.List; 

import com.mybatis.pojo.*; 

Public interface FunctionsMapper { 
Functions findFunctionsByAidl(int id); 

} 


创建 接口 AdminInfoMapper， 并 声明 方法 ， 代 码 如 下 : 


Package com.mybatis.mapper; 

import com.mybatis.pojo.AdminInfo; 

public interface AdminInfoMapper { 
RdminInfo findAdminInfoById(int id); 

} 


(5) 引用 映射 文件 。 
在 配置 文件 mybatis-configxml 中 ， 引 入 映射 文件 FunctionsMapper.xml 和 
AdminInfoMapper.xml， 代 码 如 下 : 


<!-- 引用 映射 文件 --> 


<mappers> 


<mapper resource="com/mybatis/mapper/FunctionsMapper.xml" /> 
<mapper resource="com/mybatis/mapper/AdminInfoMapper.xml" /> 
</mappers> 


(6) 测试 多 对 多 关联 映射 。 

在 测试 类 MybatisTest 中 ， 添 加 测试 方法 testFindTypeById0， 并 使 用 @Test 注解 修饰 ， 
查看 管理 员 及 其 关联 的 功能 权限 。 

// 测试 多 对 多 关联 查询 


@Test 

public void testFindAdminInfoById() { 
// 获得 AdminInfoMapper 接口 的 代理 对 象 
AdminInfoMapper aim = sqlSession.getMapper (AdminInfoMapper.class); 
// 查询 id=1 的 AdminInfo 对 象 及 其 关联 的 功能 权限 
AdminInfo ai = aim.findAdminInfoById(1); 
System.out.println(ai.tostring()); 

} 


执行 testFindTypeById0 方 法 ， 控 制 台 输 出 如 下 : 


DEBUG [main] - ==> Preparing: select * from admin info where id = ? 
DEBUG [main] 一 
DEBUG [main] -= 
fid from powers where aid = ? ) 

DEBUG [main] - ====> Parameters: 1(Integer) 
DEBUG [main] - <: Total: 10 

DEBUG [main] - <== votale 下 


@< Se Nd dn 


> Parameters: 1(Integer) 


> Preparing: select * from functions f where id in ( select 
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AdminInfo [id=1，name=admin，fs=[Functions [id=1，name= 电 子 商 城管 理 后 台 ]， 
Functions [id=2, name= 商 品 管理 ] ， Functions [id=3, name= 商 品 列表 ] ， Functions 
[id=4，name= 商 品类 型 列表 ] ，Functions [id=5，name= 订 单 管理 ] ，Functions [id=6, 
name= 查 询 订 单 ]，Functions [id=7，name= 创 建 订单 ] ，Functions [id=8，name= 用 户 管 
理 ]，Functions [id=9，name= 用 户 列表 ] ，Functions [id=11，name= 退 出 系统 ] ] ] 


可 以 看 到 , MyBatis 执行 了 两 条 select 语句 , 查询 出 了 管理 员 及 其 关联 的 功能 权限 信息 。 
13.4 小 结 


本 章 以 数据 查询 操作 为 例 ， 详 细 讲 解 了 使 用 MyBatis 框架 处 理 数据 表 之 间 一 对 一 、 一 
对 多 和 多 对 多 三 种 关联 关系 的 具体 过 程 。 
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在 SQL 语句 的 where 条 件 子 句 中 ， 往 往 需 要 进行 一 些 判断 。 例 如 ， 按 名 称 进行 模糊 查 
询 ， 如 果 传 入 的 参数 为 空 ， 查 询 结果 很 可 能 是 空 的 。 而 实际 上 ， 当 参数 为 空 时 ， 通 常 希 望 
查 出 全 部 的 信息 。 使 用 MyBatis 框架 提供 的 动态 SQL， 就 可 以 轻松 解决 这 一 问题 。 具 体 来 
说 ， 就 是 使 用 动态 SQL， 增 加 一 个 判断 ， 当 参数 不 符合 时 ， 就 不 判断 此 查询 条 件 。 

MyBatis 的 动态 SQL 是 基于 OGNL 表达 式 的 ，MyBatis 中 用 于 实现 动态 SQL 的 元 素 主 
要 包括 if、choose(when，otherwise)、trim、where、set 、foreach 等 。 


14.1 ” <i> 元 素 


SD 本, 多 用 P i 
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<if test="userName != null and userName != " "> 
where ui.userName LIKE CONCAT(CONCAT('%',#{userName}),'%®') 
</if> 
</select> 


在 上 述 <selec 人 > 元素 中 ， 使 用 <i 仑 元 素 编写 了 动态 SQL 语句 。<i 仑 元 素 会 对 userName 
属性 进行 非 空 判断 ， 如 果 传 入 的 查询 条 件 成 立 ， 即 userName 非 空 ， 就 会 将 where 子 句 拼装 
到 select 语句 中 ;否则 就 会 忽略 where 子 句 。 

(3) 在 com.mybatis.mapper 包 中 ， 创 建 接口 UserInfoMapper 并 声明 方法 ， 如 下 所 示 : 


Package com.mybatis.mapper; 
import java.util.List; 
import com.mybatis.pojo.UserIinfo; 
public interface UserInfoMapper { 
List<UserInfo> findUserInfoByUserNameWithIf (UserInfo ui); 


} 


(4) 在 测试 类 MybatisTest 中 ， 添 加 测试 方法 testFindUserInfoByUserNameWithIf)， 并 
用 @Test 注解 修饰 ， 代 码 如 下 : 


// 测试 动态 SQL 之 <if> 元 素 
@Test 
public void testFindUserInfoByUserNameWithIf() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper .class) 7 
// 创建 UserInfo 对 象 , 用 于 封装 查询 条 件 
UserInfo cond = new UserInfo() 7 
cond.setUserName ("j"); 
// 直接 调用 接口 的 方法 ， 根 据 条 件 查询 UserInfo 对 象 
List<UserInfo> uis = uim.findUserInfoBYUserNameWithIf (cond) 
for (UserInfo ui : uis) { 
System.out.println (ui.tostring()); 
} 


在 testFindUserInfoByUserNameWithIf 方法 中 ,首先 获得 UserInfoMapper 接口 的 代理 对 
象 ， 然 后 将 用 户 名 j 封装 到 UserInfo 对 象 作为 查询 条 件 ， 最 后 调用 接口 UserInfoMapper 中 


的 findUserInfoByUserNameWithIf 方法 ， 根 据 条 件 查询 UserInfo 对 象 列表 。 
(5) 执行 testFindUserInfoByUserNameWithIf 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info ui where ui.userName 
LIKE CONCAT (CONCAT('%',?),'%') 
DEBUG [main] - ==> Parameters: j (string) 


DEBUG [main] - <== Total: 3 

UserInfo [id=2, userName=john, password=123456] 
UserInfo [id=4, userName=sj, password=123456] 
UserInfo [id=6, userName=]1j, password=123456] 


从 输出 结果 可 以 看 出 ， 使 用 <i 个 元 素 查 询 出 了 用 户 名 包含 j 的 用 户 信 息 。 
在 testFindUserInfoByUserNameWithIf 方法 中 , 如 果 不 设置 userName 的 值 , 生成 的 SQL 
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语句 中 就 不 会 包含 where 子 句 。 此 时 ， 查 询 结果 为 所 有 的 用 户 信息 ， 如 下 所 示 : 


EBUG [main] - ==> Preparing: select * from user info ui 
DEBUG [main] > Parameters: 

DEBUG [main] - <== Total: 6 

UserInfo [id=1, userName=tom, password=123456] 

UserInfo [id=2, userName=john, password=123456] 


UserInfo [id=3, userName=my, password=123456] 
UserInfo [id=4, userName=sj, password=123456 
UserInfo [id=5, userName=lxf, password=123456] 
UserInfo [id=6, userName=1j, password=123456] 


14.2 <where>、<if> 元 素 


当 <i 仑 元 素 较 多 时 ， 可 能 会 拼装 成 where and 或 者 where or 之 类 的 关键 字 多 余 的 错误 
SQL 语句 ， 使 用 <where> 元 素 可 以 轻松 有 效 地 解决 这 一 问题 。 只 有 <where> 元 素 内 的 条 件 成 
立时 ， 才 会 在 拼装 SQL 语句 时 加 上 where 关键 字 。 如 果 出 现 where and 或 者 where or 时 ， 
<where> 元 素 会 自动 剔除 where 关键 字 后 面 多 余 的 and 或 or。 

以 数据 表 user_info 为 例 ， 要 求 按 用 户 名 模糊 查询 ， 同 时 查询 指定 状态 的 用 户 列表 ， 使 
用 <where> 和 <i 人 > 元素 实 现 这 一 示例 的 过 程 如 下 。 

(1) 在 映射 文件 UserInfoMapper.xml 中 ,添加 一 个 1d 为 findUserInfoByUserNameAndStatus 
的 <select> 元 素 ， 如 下 所 示 : 

<!-- 动态 SQL 之 <where>、<if> 元 素 --> 

<select id="findUserIinfoByUserNameAndSstatus" parameterType="UserInfo" 

resultType="UserInfo"> 
select * from user info ui 
<where> 
<if test="userName!=null and userName!="''"> 
ui.userName LIKE CONCAT(CONCAT('%', #{userName}),'%®') 
</if> 
<if test="status>-1"> 
and ui.status = #{status} 
</if> 
</where> 
</select> 


在 上 述 <select> 元 素 中 ,使 用 <where> 和 <i 信 元 素 编写 了 动态 SQL 语句 。 只 有 当 <where> 
元 素 内 的 条 件 成 立时 ， 才 会 在 组 装 SQL 语句 时 加 上 where 关键 字 。 假 如 第 一 个 过 条 件 不 成 
立 ， 第 二 个 直 条 件 成 立 ， 即 userName 为 空 ， 而 status 大 于 -1 时 ， 从 表面 上 看 ， 在 拼装 SQL 
语句 时 where 关键 字 之 后 会 多 余 一 个 and 关键 字 。 不 过 不 用 担心 , <where> 元 素 会 将 其 剔除 。 
(2) 在 接口 UserInfoMapper 中 ， 声 明 一 个 方法 ， 如 下 所 示 : 


List<UserInfo> findUserIinfoByUserNameAndSstatus (UserInfo ui) 


(3) 在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 ， 并 用 @Test 注解 修饰 ， 代 码 如 下 : 
// 测试 动态 SQL 之 <where>、<if> 元 素 


@< Sa a a a a a 
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@Test 
Public void testFindUserIinfoByUserNameAndstatus() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserIinfoMapper.class); 
// 创建 userInfo 对 象 ,用 于 封装 查询 条 件 
UserInfo cond = new UserInfo(); 
cond.setUserName ("mj"); 
cond.setstatus (1); 
// 直接 调用 接口 的 方法 ， 根 据 条 件 查询 UserInfo 对 象 
List<UserInfo> uis = uim.findUserInfoBYUserNameRndStatus (Cond) 7 
for (UserInfo ui : uis) { 
System.out.println (ui.tostring()); 
} 
} 


在 上 述 测试 方法 中 ， 首 先 获得 UserInfoMapper 接口 的 代理 对 象 ， 然 后 将 用 户 名 j 和 用 
户 状 态 1 封装 到 UserInfo 对 象 中 作为 查询 条 件 ， 最 后 调用 接口 UserInfoMapper 中 的 
findUserInfoByUserNameAndStatus 方法 ， 根 据 条 件 查 询 UserInfo 对 象 列表 。 

(4) 执行 上 述 测 试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info ui WHERE ui.userName 
LIKE CONCAT (CONCAT('%', ?3),'%') and ui.status = ? 

DEBUG [main] - ==> Parameters: j(String)，1(Integer) 

DEBUG [main] - <== Total: 3 


UserInfo [id=2, userName=john, password=123456] 

UserInfo [id=4, userName=sj, password=123456] 

UserInfo [id=6, userName=]1j, password=123456] 

在 上 述 测试 方法 中 ， 如 果 将 “cond.setUserName("j");” 这 条 语句 注释 掉 ， 则 会 执行 如 下 
SQL 语句 : 


DEBUG [main] - ==> Preparing: select * from user info ui WHERE ui.status = ? 


可 以 看 出 ， 如 果 属 性 userName 的 值 不 满足 测试 条 件 ， 在 拼装 SQL 语句 时 ，<where> 元 
素 会 将 where 关键 字 之 后 多 余 的 and 关键 字 剔 除 ， 从 而 避免 出 现 SQL 语法 错误 。 


14.3 ”<set> 、<if> 元 素 


<set> 和 <i 他 元 素 可 用 来 组 装 update 语句 ， 只 有 当 <set> 元 素 内 的 条 件 成 立时 ， 才 会 在 组 
装 SQL 语句 时 加 上 set 关键 字 。<set> 元 素 内 包含 <i 候 子 元 素 ， 每 个 <i 仑 元 素 包含 的 SQL 语 
句 后 面 会 有 一 个 有 逗号， 拼接 好 的 SQL 语句 中 会 包含 多 余 的 逗号 ， 从 而 造成 SQL 语法 错误 。 
不 过 不 用 担心 ，<set> 元 素 能 将 SQL 语句 中 多 余 的 逗号 剔除 。 

以 数据 表 user info 为 例 ， 要 求 更 新 某 个 用 户 的 用 户 名 和 密码 ， 使 用 <set> 和 <i 作 元素 实 
现 这 一 示例 的 过 程 如 下 : 

(1) 在 映射 文件 UserInfoMapper.xml 中 ， 添 加 一 个 id 为 updateUserInfo2 的 <update> 元 
素 ， 如 下 所 示 : 
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<!-- 动态 soL 之 <set>、<if> 元 素 --> 
<update id="updateUserInfo2" parameterType="UserInfo"> 


update user info ui 
<set> 
<if test="userName!=null and UseIName!=' " "> 
ui.userName=#{userName}, 
</if> 
<if test="password!=null and password!="''"> 
ui.password=#{password} 
</if> 
</set> 
where ui.id=#{id} 
</update> 


在 上 述 <update> 元 素 中 ， 使 用 <set> 和 <i 仑 元 素 编写 了 动态 SQL 语句 。 只 有 当 <set> 元 素 
内 的 条 件 成 立时 ， 才 会 在 组 装 SQL 语句 时 加 上 set 关键 字 。 假 如 第 一 个 并 条 件 成 立 ， 第 二 
个 直 条 件 不 成 立 , 从 表面 上 看 , 拼装 的 SQL 语句 中 会 包含 一 个 多 余 的 逗号 。 不 过 不 用 担心 ， 
<set> 元 素 会 自动 将 其 剔除 。 

(2) 在 接口 UserInfoMapper 中 ， 声 明 一 个 方法 ， 如 下 所 示 : 


void updateUserInfo2 (UserInfo ui) 7 


(3) 在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testUpdateUserInfo2， 并 用 @Test 注解 
修饰 ， 如 下 所 示 : 


// 测试 动态 SQL 之 <set>、<if> 元 素 

@Test 

public void testUpdateUserInfo2() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper .class) 
// 创建 UserInfo 对 象 , 并 初始 化 
UserInfo cond = new UserInfo() 
cond.setId(3); 
cond.setUserName ("miaoyong"); 
cond.setPassword("123123"); 
// 直接 调用 接口 的 方法 
uim.updateUserInfo2 (cond); 


} 

(4) 执行 测试 方法 ， 控 制 台 输出 如 下 : 

DEBUG [main] - ==> Preparing: update user info ui SET ui.userName=?, 

ui.password=? where ui.id=? 

DEBUG [main] - ==> Parameters: miaoyong (String), 123123 (String), 3(Integer) 

DEBUG [main] - <== Updates: 1 

在 上 述 测 试 方法 中 , 如 果 没 有 给 password 属性 设置 值 ，<set> 元 素 会 将 SQL 语句 结尾 处 
多 余 的 有 逗号 剔除 。 再 次 执行 测试 方法 ， 控 制 台 输 出 如 下 : 


DEBUG [main] - ==> Preparing: update user info ui SET ui.userName=? where 
ui.id=? 


@< ST da 
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14.4 ”<trim> 元 素 


使 用 <trim> 元 素 , 可 以 通过 prefix 属性 在 要 拼装 的 SQL 语句 片段 前 加 上 前 级 ,通过 suffix 
属性 在 要 拼装 的 SQL 语句 片段 后 加 上 后 绥 , 通过 prefixOverrides 属性 把 要 拼装 的 SQL 语句 
片段 首部 的 某 些 内 容 覆 盖 ， 通 过 suffixOverrides 属性 把 要 拼装 的 SQL 语句 片段 尾部 的 某 些 
内 容 覆 盖 。 因 此 <trim> 元 素 可 用 来 蔡 代 <where> 元 素 和 <set> 元 素 实现 同样 的 功能 。 

使 用 <trim> 元 素 蔡 代 <where> 元 素 ， 从 数据 表 user info 中 按 用 户 名 模糊 查询 ， 同 时 查询 
指定 状态 的 用 户 列表 ， 实 现 步骤 如 下 : 

(1) 在 UserInfoMapper.xml 中 ， 添 加 一 个 id 为 findUserInfoByUserNameWithIf Trim 的 
<select> 元 素 ， 如 下 所 示 : 


<!-- 动态 SQL 之 <trim> 元 素 1 --> 
<select id="findUserIinfoByUserNameWithIf Trim" parameterType="UserIinfo" 
resultType="UserInfo"> 
select * from user info ui 
<trim prefix="where" prefixOverrides="and|or"> 
<if test="userName!=null and userName!=''"> 
ui.userName LIKE CONCAT(CONCAT('%', #{userName}),'%®') 
</if> 
<if test="status>-1"> 
and ui.status = #{status} 
</if> 
</trim> 
</select> 


在 上 述 <select> 元 素 中 ,使 用 <trim> 元 素 编写 了 动态 SQL 语句 。 在 <trim> 元 素 中 ，prefix 
属性 设置 为 where, 将 要 拼装 的 SQL 语句 的 前 级 设 置 为 where， 即使 用 where 关键 字 来 连接 
后 面 的 SQL 语句 片段 ，prefixOverrides 属性 设置 为 andlor， 是 将 要 拼装 的 SQL 语句 片段 首 
部 多 余 的 “and” 或 “or” 关 键 字 去 除 。 

(2) 在 接口 UserInfoMapper 中 ， 声 明 一 个 方法 ， 如 下 所 示 : 


List<UserInfo> findUserIinfoByUserNameWithIf Trim(UserInfo ui); 


(3) 在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 ， 并 用 @Test 注解 修饰 ， 如 下 所 示 : 


// 测试 动态 SQL 之 <trim> 元 素 替 代 <where> 元 素 
@Test 
public void testFindUserIinfoByUserNameWithIf Trim() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserIinfoMapper.class); 
// 创建 UserInfo 对 象 ,并 初始 化 
UserInfo cond = new UserInfo(); 
cond.setUserName ("J"); 
cond.setstatus (1); 
// 直接 调用 接口 的 方法 ， 根 据 条 件 查 询 UserInfo 对 象 


List<UserInfo> uis = uim.findUserInfoByUserNameWithIf Trim(cond); 
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for (UserInfo ui : uis) { 


System.out.println(ui.tostring()); 
, 


(4) 执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info ui where ui.userName 
LIKE CONCAT (CONCAT('%', 2?),'%$') and ui.status = ? 

DEBUG [main] - ==> Parameters: j(String)，1(Integer) 

DEBUG [main] - <== Total: 3 

UserInfo [id=2, userName=john, password=123456] 


UserInfo [id=4, userName=sj, password=123456] 
UserInfo [id=6, userName=1j, password=123456] 


在 上 述 测试 方法 中 ， 如 果 没 有 设置 userName 的 值 ，<trim> 元 素 会 将 status 条 件 前 多 余 
的 and 关键 字 剔 除 。 再 次 执行 测试 方法 ， 控 制 台 输 出 的 SQL 语句 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info ui where ui.status = ? 


使 用 <trim> 元 素 还 可 以 蔡 代 <set> 元 素 ， 以 更 新 数据 表 user_info 中 某 个 用 户 的 用 户 名 和 
密码 为 例 ， 具 体 步 又 如 下 。 
(1) 在 映射 文件 UserInfoMapper.xml 中 ,添加 一 个 id 为 updateUserInfo2_trim 的 <update> 
元 素 ， 如 下 所 示 : 
<!-- 动态 SQL 之 <trim> 元 素 蔡 代 <set> 元 素 --> 
<update id="updateUserInfo2 trim" parameterType="UserInfo"> 
update user info ui 
<trim prefix="set" suffixOverrides=","> 
<if test="userName!=null and userName!=''"> 
ui.userName=#{userName}, 
</if> 
<if test="password!=null and password!=''"> 
ui.password=#{password} 
</if> 
</trim> 
where ui.id=#{id} 
</update> 


在 上 述 <update> 元 素 中 , 使 用 <trim> 元 素 编写 了 动态 SQL 语句 。 在 <trim> 元 素 中 , prefix 
属性 设置 为 set， 将 要 拼装 的 SQL 语句 的 前 级 设置 为 set， 即 使 用 set 关键 字 来 连接 后 面 的 
SQL 语句 片段 ，suffixOverrides 属性 设置 为 “.”， 将 要 拼装 的 SQL 语句 片段 尾部 多 余 的 去 
号 去 除 。 

(2) 在 接口 UserInfoMapper 中 ， 声 明 一 个 方法 ， 如 下 所 示 : 

void updateUserInfo2_trim(UserInfo ui) 7 

G3) 添加 测试 方法 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 ， 并 用 @Test 注解 修饰 ， 如 下 所 示 : 

// 测试 动态 sQL 之 <trim> 元 素 普 代 <set> 元 素 
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@Test 

Public void testUpdateUserInfo2 trim() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper.class); 
// 创建 UserInfo 对 象 , 并 初始 化 
UserInfo cond = new UserInfo(); 
cond.setId(3); 
cond.setUserName ("mmm"); 
cond.setPassword("321321"); 
// 直接 调用 接口 的 方法 
uim.updateUserInfo2 trim(cond); 

} 


执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: update user info ui set ui.userName=?, 
ui.password=? where ui.id=? 

DEBUG [main] - ==> Parameters: mmm(String), 321321 (String), 3(Integer) 
DEBUG [main] - <== Updates: 1 


在 上 述 测 试 方法 中 ， 如 果 没 有 给 password 属性 指定 值 ，<trim> 元 素 会 将 要 拼装 的 SQL 
语句 片段 尾部 多 余 的 逗号 去 除 。 再 次 执行 测试 方法 ， 控 制 台 输出 的 SQL 语句 如 下 : 


DEBUG [main] - ==> Preparing: update user info ui set ui.userName=? where 
ui.id=? 


14.5 <choose>、<when> 和 <otherwise> 元 素 


在 查询 中 ， 如 果 不 想 使 用 所 有 的 条 件 ， 而 只 是 想 从 多 个 选项 中 选择 一 个 ， 可 以 使 用 
MyBatis 提供 的 <choose>、<when> 和 <otherwise> 元 素来 实现 。<choose> 元 素 会 按 顺序 判断 
<when> 元 素 中 的 条 件 是 否 成 立 ， 如果 有 一 个 成 立 ， 则 不 再 判断 后 面 <when> 元 素 中 的 条 件 是 
否 成 立 ，<choose> 元 素 执行 结束 ; 如 果 所 有 <when> 的 条 件 都 不 满足 ， 则 执行 <otherwise> 元 
素 中 的 SQL 语句 。 

如 果 想 从 数据 表 user_info 中 根据 userName 或 status 进行 查询 ， 当 userName 不 为 空 时 
则 只 按照 userName 查询 ， 其 他 条 件 忽 略 ， 否 则 当 status 大 于 -1 时 ， 则 只 按照 status 查询 ; 
当 userName 和 status 都 为 空 时 , 则 查询 所 有 用 户 记 录 , 使 用 <choose>、<when> 和 <otherwise> 
元 素 实 现 这 个 示例 的 步骤 如 下 : 

(1) 在 映射 文件 UserInfoMapper.xml 中 ， 添 加 一 个 id 为 findUserInfo_Choose 的 <select> 
元 素 ， 如 下 所 示 : 


<!-- 动态 SQL 之 <choose>、<when> 和 <otherwise> 元 素 --> 
<select id="findUserInfo Choose" parameterType="UserInfo" 
resultType="UserInfo"> 
select * from user info ui 
<where> 
<choose> 
<when test="userName!=null and userName!="''"> 
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CONCAT (CONCAT ('%',#{userName}),'%') 
</when> 


<when test="status>-1"> 
and ui.status = #{status} 

</when> 

<otherwise> 

</otherwise> 

</choose> 
</where> 
</select> 


在 上 述 <select> 元 素 中 ， 使 用 <choose>、<when> 和 <otherwise> 元 素 编写 了 动态 SQL 语 
句 。 当 第 一 个 <when> 元 素 中 的 条 件 成 立时 ， 只 动态 拼装 第 一 个 <when> 元 素 中 的 SQL 语句 
片段 。 否则， 继续 判断 下 一 个 <when> 元 素 中 的 条 件 。 当 所 有 的 <when> 元 素 中 的 条 件 都 不 成 
立时 ， 则 只 拼接 <otherwise> 元 素 内 的 SQL 语句 片段 。 

(2) 在 接口 UserInfoMapper 中 ， 声 明 一 个 方法 ， 如 下 所 示 : 


List<UserInfo> findUserIinfo Choose(UserInfo ui); 
(3) 添加 测试 方法 。 
在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 ， 并 用 @Test 注解 修饰 ， 如 下 所 示 : 


// 测试 动态 SQL 之 <choose>、<when> 和 <otherwise> 元 素 
@Test 
Public void testFindUserIinfo Choose() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper.class); 
// 创建 UserInfo 对 象 , 用 于 封装 查询 条 件 
UserInfo cond = new UserInfo(); 
cond.setUserName ("j"); 
cond.setstatus (1); 
// 直接 调用 接口 的 方法 
List<UserInfo> uis = uim.findUserIinfo Choose(cond); 
for (UserInfo ui : uis) { 
System.out.println (ui.tostring()); 
了 
} 


(4) 执行 该 测试 方法 ， 控 制 台 输 出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info ui WHERE ui.userName 
LIKE CONCAT (CONCRT ('%',?),"'%"') 

DEBUG [main] - ==> Parameters: j (string) 

DEBUG [main] - <== Total: 3 


UserInfo [id=2, userName=john, password=123456] 
UserInfo [id=4, userName=sj, password=123456] 
UserInfo [id=6, userName=]1j, password=123456] 


从 控制 台 输出 可 以 看 出 ， 虽 然 用 户 名 和 用 户 状 态 这 两 个 条 件 都 成 立 , 但 MyBatis 所 拼 
装 的 SQL 语句 中 只 包含 用 户 名 ， 用 户 状态 这 个 条 件 被 忽略 了 。 
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14.6 ”<foreach> 元 素 


<foreach> 元 素 主要 是 迭代 一 个 集合 , 在 SQL 语句 中 通常 用 在 in 这 个 关键 字 的 后 面 。 例 
如 ，SQL 语句 中 的 条 件 形 如 : where id in(idl, id2，…)， 这 时 可 使 用 <foreach> 元 素 ， 而 不 必 
去 拼接 id 字符 串 。 
<foreach> 元 素 可 以 向 SQL 语句 传递 数组 、List<E> 等 实例 .List<E> 实 例 使 用 list 作为 键 ， 
数组 实例 使 用 array 作为 键 。 
如 果 想 从 数据 表 user_info 中 查询 id 为 1 和 3 的 用 户 记录 ,使 用 <foreach> 元 素 的 List<E> 
实例 的 实现 步骤 如 下 : 
(1) 在 映射 文件 UserInfoMapper.xml 中 ， 添 加 一 个 id 为 findUserInfoBylds 的 <select> 元 
素 ， 如 下 所 示 : 
<!-- 动态 SQL 之 <foreach> 元 素 --> 
<select id="findUserIinfoByIds" resultType="UserIinfo"> 
select * from user info ui where ui.id in 
<foreach collection="list" item="ids" open="(" separator="," 
close=")"> 
#{ids} 
</foreach> 
</select> 


<foreach> 元 素 的 主要 属性 有 item、index、collection、open、separator 和 close 等 。item 
属性 表示 集合 中 每 个 元 素 迭 代 时 的 别名 ; index 属性 指定 一 个 变量 名 称 ， 表 示 每 次 迭代 到 的 
位 置 ，open 表示 该 语句 的 开始 符号 ; separator 属性 表示 每 次 迭代 之 间 的 分 隔 符号 ;close 属 
性 表示 该 语句 的 结束 符号 ; collection 属性 需要 根据 具体 情况 进行 设置 ， 通 常 有 以 下 两 种 
情况 。 

@ 如果 向 SQL 语句 传递 的 是 单 参数 且 参 数 类 型 为 List<E>,collection 属性 的 值 为 list。 

@ ”如 果 向 SQL 语句 传递 的 是 单 参数 且 参 数 类 型 为 array 数组 ，collection 属性 的 值 为 

aray。 
(2) 在 接口 UserInfoMapper 中 ， 声 明 一 个 方法 ， 如 下 所 示 : 


List<UserInfo> findUserInfoByIds (List<Integer> ids); 
(3) 添加 测试 方法 。 
在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 ， 并 用 @Test 注解 修饰 ， 如 下 所 示 : 


// 测试 动态 SQL 之 <foreach> 元 素 
@Test 
public void testFindUserInfoByIds() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserIinfoMapper.class); 
// 创建 集合 对 象 ids, 保存 用 户 id 
List<Integer> ids = new ArrayList<Integer>(); 
ids.add(1); 
ids.adqd(3); 
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// 直接 调用 接口 的 方法 
List<UserInfo> uis = uim-findUserInfoByIds (ids); 
for (UserInfo ui : uis) { 


System.out.println (ui); 
二 
} 


(4) 执行 该 测试 方法 ， 控 制 台 输 出 如 下 : 


DEBUG [main] - ==> Preparing: select * fromuser infouiwhereui.idin(?,?) 
DEBUG [main] - ==> Parameters: 1(Integer)，3(Integer) 
DEBUG [main] - <== Total: 2 


UserInfo [id=1，userName=tom password=123456] 
UserInfo [id=3, userName=mmm, password=321321 


从 控制 台 输 出 可 以 看 出 ， 使 用 <foreach> 元 素 的 List<E> 实 例 ， 对 传 入 的 用 户 id 集合 进 
行动 态 SQL 拼装 ， 最 终 批 量 查询 出 了 对 应 的 用 户 信息 。 

除了 List<E> 实 例 ， 使 用 <foreach> 元 素 的 array 实例 ， 也 能 实现 从 数据 表 user_info 中 查 
询 id 为 1 和 3 的 用 户 信息 ， 有 具体 步骤 如 下 : 

(1) 在 映射 文件 UserInfoMapper.xml 中 ， 添 加 一 个 id 为 findUserInfoByIds2 的 <select> 
元 素 ， 相 关 代码 如 下 : 


<select id="findUserIinfoByIds2" resultType="UserIinfo"> 
select * from user info ui where ui.id in 
<foreach collection="array" item="ids" open="(" separator="," 
close=")"> 
#{ids} 
</foreach> 
</select> 


(2) 在 接口 UserInfoMapper 中 ， 声 明 一 个 方法 ， 如 下 所 示 : 


List<UserInfo> findUserInfoByIds2 (int[] ids); 


(3) 添加 测试 方法 。 
在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 ， 并 用 @Test 注解 修饰 ， 如 下 所 示 : 


@Test 
public void testFindUserInfoByIds2() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper .class) 7 
// 创建 数组 对 象 ids, 保存 用 户 id 
int[] ids = new int[2]7 
ids[0] = 1; 
ids[1] = 3; 
// 直接 调用 接口 的 方法 
List<UserInfo> uis = uim.findUserInfoByIds2 (ids); 
for (UserInfto ui : uis) { 
System.out.println (ui); 
. 


@< Se a dn 


第 14 章 动态 SQL 


(4) 执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: select * fromuser infouiwhereui.idin (?,?) 
DEBUG [main] - ==> Parameters: 1(Integer), 3(Integer) 
DEBUG [main] - <== Total: 2 


UserInfo [id=1l, userName=tom, password=123456] 
UserInfo [id=3, userName=mmm, password=321321] 


从 控制 台 输出 可 以 看 出 ， 使 用 <foreach> 元 素 的 array 实例 对 传 入 的 用 户 id 集合 进行 动 
态 SQL 拼装 ， 最 终 批量 查询 出 了 对 应 的 用 户 信 息 。 


14.7 小 结 
本 章 首先 介绍 了 MyBatis 框架 的 动态 SQL 语句 及 动态 SQL 语句 的 主要 元 素 , 然后 结合 


具体 示例 ， 对 这 些 元 素 进行 了 详细 的 讲解 。 在 MyBatis 框架 中 ， 动 态 SQL 语句 比较 重要 ， 
熟练 使 用 可 以 提高 开发 效率 。 
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MyBatis 是 一 个 XML 驱动 的 框架 ， 前 面 介绍 的 MyBatis 框架 的 增删 改 查 、 关 联 映射 、 
动态 SQL 语句 等 知识 , 其 所 有 的 配置 都 是 通过 XML 完成 的 , 编写 大 量 的 XML 配置 比较 烦 
琐 。 到 了 MyBatis 3， 可 以 使 用 MyBatis 提供 的 基于 注解 的 配置 方式 。 本 章 基 于 注解 ， 详 细 
讲解 MyBatis 框架 的 增删 改 查 、 关 联 映 射 、 动 态 SQL 语句 等 知识 。 


15.1 基于 注解 的 单 表 增 删改 碍 


MyBatis 提供 了 @Insert、@Delete、@Update 和 @Select 等 常用 注解 ， 可 以 实现 数据 的 
增 、 删 、 改 、 查 等 操作 。 以 数据 表 user info 为 例 ， 基 于 注解 实现 增删 改 查 操 作 的 具体 步骤 
如 下 : 

(1) 将 项 目 mybatisl 复制 并 命名 为 mybatis8， 再 导入 到 e 开发 环境 中 ， 

(2) 将 项 目 mybatis8 的 com.mybatis.pojo 包 中 的 
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import com.mybatis.pojo.UserInfo; 
public interface UserIinfoMapper { 
select ("select * from user info where id=#{id}") 
public UserInfo findUserInfoByYId (int id); 
select ("select * from user info where userName like 
CONCAT (CONCAT ('%',#{userName}),'$')") 
public List<UserInfo> findUserIinfoByUserName (String userName); 
@Insert ("insert into user info(userName,password) 
values (#{userName},#{password})") 
public int addUserInfo(UserInfo ui); 
@Update ("update user info set userName=#{userName},password=#{password} 
where id=#{id}") 
public int updateUserInfo (UserInfo ui); 
@Delete ("delete from user info where id=#{id}") 
public int deleteUserInfol(int id); 
} 


在 接口 UserInfoMapper 中 ， 声 明了 findUserInfoByld、findUserInfoByUserName、 
addUserInfo、updateUserInfo 和 deleteUserInfo 五 个 方法 。 其 中 ，findUserInfoById 方法 用 于 
根据 用 户 编号 查询 用 户 ，findUserInfoByUserName 方法 用 于 根据 用 户 名 模糊 查询 用 户 ， 
addUserInfo 方法 用 于 添加 用 户 , updateUserInfo 方法 用 于 修改 用 户 , deleteUserInfo 方法 用 于 
删除 用 户 。 这 五 个 方法 分 别 使 用 @Select、@Insert、@Update、(@Delete 注解 奉 代 了 之 前 映 
射 文件 中 的 XML 配置 ，@Select 注解 用 于 映射 select 语句 ，@Insert 注解 用 于 映射 insert 语 
句 ，@Update 注解 用 于 映射 update 语句 ，@Delete 注解 用 于 映射 delete 语句 。 对 @Select 注 
解 来 说 ， 会 涉及 查询 结果 的 映射 。 如 果实 体 类 属性 和 数据 表 字 段 名 保持 一 致 ，MyBatis 会 自 
动 完 成 结果 映射 。 如 果 不 一 致 ， 则 需要 使 用 @Results 注解 手动 完成 结果 映射 。 后 面 的 示例 
将 会 用 到 @Results 注解 ， 到 时 再 作 具 体 讲解 。 

(4) 修改 MyBatis 配置 文件 。 

在 mybatis-config.xml 文件 的 <mappers> 元 素 中 , 先 将 原先 对 UserInfoMapper.xml 映射 文 
件 引入 的 配置 删除 或 注释 掉 ， 再 添加 对 接口 UserInfoMapper 的 引用 ， 如 下 所 示 : 


<!-- 引用 接口 --> 


<mappers> 

<!-- <mapper resource="com/mybatis/mapper/UserIinfoMapper.xml" /> --> 
<mapper class="com.mybatis.mapper.UserInfoMapper" /> 

</mappers> 


(5) 修改 测试 类 MybatisTest 中 的 测试 方法 。 
testFindUserInfoById 方法 修改 如 下 所 示 : 


// 根据 id 查询 用 户 
@Test 
public void testFindUserInfoById() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper um = sqlSession.getMapper (UserInfoMapper .class) 7 
// 直接 调用 接口 的 方法 
UserInfo ui = um.findUserInfoById(1); 


// 打印 输出 结果 
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System.out.println (ui.tostring()); 


} 


testFindUserInfoByUserName 方法 修改 如 下 所 示 : 
// 根据 用 户 名 模糊 查询 用 户 


@Test 
public void testFindUserIinfoByUserName() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper um = sqlSession.getMapper (UserIinfoMapper.class); 
// 直接 调用 接口 的 方法 
List<UserInfo> uis = um.findUserInfoByUserName ("j"); 
for (UserInfo ui : uis) { 
// 打印 输出 结果 


System.out.println (ui.tostring()); 


} 


testAddUserInfo 方法 修改 如 下 所 示 : 


// 添加 用 户 
@Test 
public void testAddUserInfo() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper um = sqlSession.getMapper (UserInfoMapper .class) /7 
// 创建 UserInfo 对 象 ui 
UserInfo ui = new UserInfo() 
// 向 对 象 ui 中 添加 数据 
ui.setUserName ("mybatis1"); 
ui.setPassword("123456"); 
// 直接 调用 接口 的 方法 
int result = um.addUserInfo (ui); 
1 (result > Oh € 
System.out.println ("插入 成 功 ")， 
} else { 
System.out.println ("插入 失败 ") ; 


} 


testUpdateUserInfo 方法 修改 如 下 所 示 : 
// 修改 用 户 


@Test 

public void testUpdateUserInfo() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper um = sqlSession.getMapper (UserIinfoMapper.class); 
// 加 载 编号 为 8 的 用 户 

UserInfo ui = um.findUserInfoById(8); 
// 重新 设置 用 户 密码 
ui.setPassword("123123"); 
// 直接 调用 接口 的 方法 
int result = um.updateUserInfo (ui); 
1 (result >. 0F { 
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System.out.println ("插入 成 功 "); 
System.out.println (ui); 
} else { 
System.out.println ("插入 失败 ") ; 
} 


testDeleteUserInfo 方法 修改 如 下 所 示 : 


// 删除 用 户 
@Test 
Public void testDeleteUserInfo() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper um = sqlSession.getMapper (UserIinfoMapper.class); 
// 直接 调用 接口 的 方法 
int result = um.deleteUserInfo(8); 
if (result > 0) { 
System.out.println(" 成 功 删除 了 ”+ result + "条 记录 ") ; 
} else { 
System.out.println ("插入 删除 ") ; 
} 
} 


这 些 测试 方法 的 执行 结果 与 12.4 小 节 中 使 用 映射 文件 映射 SQL 语句 时 相同 。 通过 这 个 
示例 可 以 看 出 , 使 用 注解 配置 无 需 编 写 映射 文件 , 只 需 在 接口 的 方法 上 使 用 注解 实现 对 SQL 
语句 的 映射 ， 从 而 简化 了 程序 的 开发 。 


15.2 ”基于 注解 的 一 对 一 关联 映射 


使 用 MyBatis 的 注解 配置 ， 除 了 可 以 实现 单 表 的 增删 改 查 操作 外 ， 还 可 以 实现 多 表 的 
关联 映射 。 以 13.1 小 节 使 用 的 数据 表 idcard 和 person 为 例 ， 基 于 注解 配置 实现 这 两 张 表 之 
间 的 一 对 一 关联 映射 ， 具 体 步骤 如 下 : 
(1) 将 项 目 mybatis4 中 与 数据 表 idcard 和 person 对 应 的 实体 类 Idcard.java 和 Person.java 
复制 到 项 目 mybatis8 的 com.mybatis.pojo 包 中 。 
(2) 在 com.mybatismapper 包 中 ， 创 建 接口 IdcardMapper 和 PersonMapper。 在 接口 
IdcardMapper 中 添加 一 个 fmdIdcardById 方法 ， 如 下 所 示 : 
Package com.mybatis.mapper; 
import org-apache.ibatis.annotations.Select7 
import com.mybatis.pojo.Idcard; 
public interface IdcardMapper { 
// 根据 id 查询 身份 证 信息 
@select ("select * from idcard where id=#{id}") 
public Idcard findIdcardById(int id); 

} 


在 接口 PersonMapper 中 添加 一 个 findPersonByld 方法 ， 如 下 所 示 : 
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Package com.mybatis.mapper; 


import org.apache.ibatis.annotations.One; 
import org.apache.ibatis.annotations.Result; 
import org.apache.ibatis.annotations.Results; 
import org.apache.ibatis.annotations.Select; 
import com.mybatis.pojo.Person; 
Public interface PersonMapper { 
@select ("select * from person where id = #{id} ") 
@Results ({ 
@Result (column = "cid", property = "idcard", one = @One(select 
= "com.mybatis.mapper.IdcardMapper.findIdcardById")) }) 
// 根据 id 查询 个 人 信息 
Public Person findPersonById(int id); 
} 


在 findPersonById 方法 中 , 使 用 @Select 注解 映射 根据 id 查询 Person 对 象 的 SQL 语句 ， 
使 用 @Results 注解 映射 查询 结果 。 在 @Results 注解 中 ， 可 以 包含 多 个 @Result 注解 ， 一 个 
@Result 注解 完成 实体 类 中 一 个 属性 和 数据 表 中 一 个 字段 的 映射 。 

Person 对 象 中 的 基本 属性 可 以 自动 完成 结果 映射 ， 而 关联 的 对 象 属性 idcard 需要 手工 
完成 映射 。 这 里 ， 在 @Results 注解 中 使 用 了 一 个 @Result 注解 来 映射 关联 结果 。 在 @Result 
注解 中 ，property 属性 用 来 指定 关联 属性 ， 这 里 为 idcard; one 属性 用 来 指定 数据 表 属 于 哪 
种 关联 关系 ,通过 @One 注解 表明 数据 表 idcard 和 person 之 间 是 一 对 一 关联 关系 。 在 @One 
注解 中 ，select 属性 用 于 指定 关联 属性 idcard 的 值 是 通过 执行 com.mybatis.mapper 包 中 
IdcardMapper 接口 里 定义 的 findIdcardById 方法 获得 的 。 

@Result 注解 的 column 属性 用 于 指定 传 入 findIdcardById(int id) 方 法 的 参数 名 ， 这 里 为 
cid， 表 示 从 数据 表 person 查询 出 的 cid 字段 值 。 

(3) 添加 接口 文件 的 引用 。 

在 mybatis-config.xml 文件 中 , 添加 对 接口 IdcardMapper 和 PersonMapper 的 引用 ,如 下 


所 示 : 
<!-- 引用 接口 --> 
<mappers> 


<mapper class="com.mybatis.mapper.IdcardMapper" /> 
<mapper class="com.mybatis.mapper.PersonMapper" /> 
</mappers> 


(4) 测试 一 对 一 关联 映射 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testOne2One0， 使 用 @Test 注解 修饰 ， 从 
数据 表 person 中 查询 记录 的 同时 ， 查 询 关联 表 idcard 中 的 身份 证 信息 。 其 代码 如 下 : 

QTest 


public void testone2one () { 


// 获得 PersonMapper 接口 的 代理 对 象 


PersonMapper pm = sqlSession.getMapper (PersonMapper.class); 


// 直接 调用 接口 中 的 方法 ， 根 据 id 查询 Person 对 象 及 关联 的 Idcard 对 象 
Person person = pm.findPersonById(1); 


// 查看 Person 对 象 及 关联 的 Idcard 对 象 
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System.out.println (person.toString()); 


} 


执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG 
DEBUG 
DEBUG 
DEBUG 
DEBUG 
DEBUG 


import 
import 
import 
import 
import 
import 
public 


} 


[main] - ==> Preparing: select * from person where id = ? 
[main] - ==> Parameters: 1(Integer) 
[main] 一 Preparing: select * from idcard where id=? 


[main] 一 


[main] - <= 


Parameters: 1(Integer) 


Total: 1 


[main] - <== Total: 1 
Person [id=1l, name=zhangsan, age=22, sex= 男 ， idcard=Idcard [id=1, 
cno=320100197001010001]] 


使 用 MyBatis 注解 配置 ， 在 查询 Person 对 象 时 ， 关 联 的 Idcard 对 象 也 查询 出 来 了 。 


15.3 ”基于 注解 的 一 对 多 关联 映射 


以 13.2 小 节 使 用 的 商品 类 别 表 type 和 商品 表 product_info 为 例 ， 基 于 注解 配置 实现 这 
两 张 表 之 间 的 一 对 多 关联 映射 ， 具 体 步骤 如 下 : 

(1) 将 项 目 mybatis5 中 与 数据 表 type 和 product info 对 应 的 实体 类 Type.java 和 
ProductInfo.java 复制 到 项 目 mybatis8 的 com.mybatis.pojo 包 中 。 

(2) 在 com.mybatis.mapper 包 中 ， 创 建 接口 ProductInfoMapper 和 TypeMapper。 在 
ProductInfoMapper 接口 中 ， 编 写 如 下 代码 : 


package com.mybatis.mapper; 


java.util.List; 
org.apache.ibatis 
org.apache.ibatis 


org.apache.ibatis. 


-annotations.One; 
-annotations.Result; 
org.apache.ibatis. 


annotations.Results; 
annotations.Select; 


com.mybatis.pojo.ProductIinfo; 
interface ProductIinfoMapper { 
// 根据 类 型 编号 查询 所 有 商品 
@select ("select * from product info where tid = #{tid} ") 
List<ProductInfo> findProductIinfoByTid(int tid); 
// 根据 商品 编号 获取 商品 信息 
@Sselect ("select * from product info where id = #{id} ") 
@Results ({ 
@Result (column = "tid", property = "type", one = Qone (select = 
"com.mybatis.mapper.TypeMapper.findTypeById")) }) 

ProductInfo findProductInfoByid(int id); 


在 接口 ProductInfoMapper 中 , 首先 声明 了 一 个 findProductInfoByTid 方法 , 通过 @Select 
注解 配置 ， 根 据 商品 类 型 编号 查询 所 有 商品 信息 。 

然后 声明 了 一 个 findProductInfoByid 方法 ， 通 过 @Select 注解 配置 ， 根 据 商 品 编号 获取 
商品 信息 。 如 果 希 望 在 查询 ProductInfo 对 象 时 , 将 关联 的 Type 对 象 也 查询 出 来 ， 可 以 使 用 
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@Results 注解 手工 完成 关联 属性 的 映射 。 在 @Results 注解 中 ， 添 加 一 个 @Result 注解 ， 
property 属性 用 来 指定 关联 属性 ,这 里 为 type; one 属性 用 来 指定 数据 表 属 于 哪 种 关联 关系 ， 
通过 @One 注解 表明 数据 表 product_info 和 type 之 间 是 一 对 一 关联 关系 。 在 @One 注解 中 ， 
select 属性 用 于 指定 关联 属性 type 的 值 是 通过 执行 com.mybatis.mapper 包 中 TypeMapper 接 
口 里 定义 的 findTypeByld 方法 获得 的 。@Result 注解 的 column 属性 设置 为 td， 表 示 传 入 
findTypeById 方法 的 参数 为 从 数据 表 product info 查询 出 的 tid 字段 值 。 

在 接口 TypeMapper 中 ， 编 写 如 下 代码 : 


Package com.mybatis.mapper; 


import org.apache.ibatis.annotations.Many; 
import org.apache.ibatis.annotations.Result; 
import org.apache.ibatis.annotations.Results; 
import org.apache.ibatis.annotations.Select; 
import com.mybatis.pojo.Type; 
public interface TypeMapper { 
// 根据 商品 类 型 编号 查询 商品 类 型 信息 
@Select ("select * from type where id #{id} ") 
@Results({ @Result (id = true, column "id", property = "id"), 
@Result (column = "name", property = "name"), 
@Result (column = "id", property = "pis", many = @Many (select = 
"com.mybatis.mapper.ProductIinfoMapper.findProductInfoByTid")) }) 
Type findTypeById (int id); 


} 


在 接口 TypeMapper 中 ， 声 明了 一 个 findTypeByld 方法 ， 通 过 @Select 注解 配置 ， 根 据 
商品 类 型 编号 查询 商品 类 型 信息 。 如 果 希 望 在 查询 Type 对 象 时 , 将 关联 的 ProductInfo 对 象 
也 查询 出 来 ， 可 以 使 用 @Results 注解 手工 完成 关联 属性 的 映射 。 在 @Results 注解 中 ， 添 加 
了 三 个 @Result 注解 。 前 两 个 @Result 注解 用 于 完成 Type 对 象 的 基本 属性 id 和 name 与 数 
据 表 type 的 id 和 name 字段 的 映射 , 最 后 一 个 @Result 注解 用 于 关联 属性 的 映射 。 在 最 后 一 
个 @Result 注解 中 ，property 属性 用 来 指定 关联 属性 ， 这 里 为 ps， many 属性 用 来 指定 数据 
表 属 于 哪 种 关联 关系 ， 通 过 @Many 注解 表明 数据 表 type 和 product info 之 间 是 一 对 多 关联 
关系 。 在 @Many 注解 中 ，select 属性 用 于 指定 关联 属性 pis 的 值 是 通过 执行 
com.mybatis.mapper 包 中 ProductInfoMapperjava 接口 里 定义 的 方法 findProductInfoByTid 获 
得 的 。@Result 注解 的 column 属性 设置 为 4， 表 示 传 入 findProductInfoByTid(int tid) 方 法 的 
参数 为 从 数据 表 type 查询 出 的 id 字段 值 。 

(3) 添加 接口 文件 的 引用 。 

在 mybatis-config .xml 文件 中 ， 添 加 对 接口 ProductInfoMapper 和 TypeMapper 的 引用 ， 
如 下 所 示 : 

<1- 引用 接口 --> 


<mappers> 
<mapper class="com.mybatis.mapper.TypeMapper" /> 


<mapper class="com.mybatis.mapper.ProductIinfoMapper" /> 
</mappers> 
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(4) 测试 一 对 多 关联 映射 。 
在 测试 类 MybatisTest 中 ， 添 加 测试 方法 testOne2Many， 使 用 @Test 注解 修饰 ， 从 数据 
表 type 查询 记录 的 同时 ， 获 取 关 联 的 数据 表 product_info 中 的 记录 。 其 代码 如 下 : 
@Test 
public void testone2Many() { 
// 获得 TypeMapper 接口 的 代理 对 象 
TypeMapper tm = sqlSession.getMapper (TypeMapper.class); 
// 直接 调用 接口 的 方法 ， 查询 Type 对 象 及 关联 的 ProductInfo 对 象 
Type type = tm.findTypeById(1); 
System.out.println (type.tostring()); 
} 


执行 测试 方法 testOne2Many， 控 制 台 输出 如 下 所 示 : 


DEBUG [main] - ==> Preparing: select * from type where id = ? 

DEBUG [main] - ==> Parameters: 1(Integer) 

DEBUG [main] 一 > Preparing: Select * from product info where tid = ? 
DEBUG [main] 一 Parameters: 1(Integer) 

DEBUG [main] 一 Total: 6 

DEBUG [main] - < Total: 1 


Type [id=1, name= 电 脑 ， pis=[ProductInfo [id=1l, code=1378538, 
name=AppleMJVE2CH/A], ProductInfo [id=2, code=1309456, 
name=ThinkPadE450C(20EH0001CD)], ProductInfo [id=3, code=1999938, name= 联 
想 小 新 300 经 典 版 ]，ProductInfo [id=4，code=1466274，name= 华 硕 Fx50JX]， 
ProductInfo [id=5, code=1981672, name= 华 硕 FL5800]， ProductInfo [id=6, 
code=1904696，name= 联 想 G50-70M] ] ] 


可 以 看 到 ， 查 询 Type 对 象 时 关联 的 ProductInfo 对 象 也 查询 出 来 了 。 

(5) 测试 多 对 一 关联 映射 。 

在 测试 类 MybatisTest 中 ， 添 加 测试 方法 testMany2One0， 使 用 @Test 注解 修饰 ， 从 数 
据 表 product info 查询 记录 的 同时 ， 获 取 关 联 的 数据 表 type 中 的 记录 。 


public void testMany20ne() { 
// 获得 ProductInfoMapper 接口 的 代理 对 象 
ProductInfoMapper pim = sqlSession.getMapper (ProductInfoMapper .class) /7 
// 直接 调用 接口 的 方法 ， 查 询 ProductInfo 对 象 
ProductInfo pi = pim.findProductInfoByid(1) 7 
System.out.println (pi.tostring()); 
// 查看 关联 的 Type 对 象 
System.out.println (pi.getType ()); 
} 


执行 测试 testMany2One0 方 法 ， 控 制 台 输 出 如 下 所 示 : 


DEBUG [main] - ==> Preparing: select * from product info where id = ? 
DEBUG [main] 一 
DEBUG [main] — > Preparing: select * from type where id = ? 
DEBUG [main] 一 
DEBUG [main] 一 
DEBUG [main] 一 
DEBUG [main] 一 


> Parameters: 1(Integer) 


Parameters: 1(Integer) 


> Preparing: select * from product info where tid = ? 


Parameters: 1(Integer) 
Total: 6 
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DEBUG [main] - < 
DEBUG [main] — <: Total: 1 


ProductInfo [id=1, code=1378538, name=AppleMJVE2CH/A] 
Type [id=1，name= 电 脑 ，pis=[..…]] 


可 以 看 到 ， 查 询 ProductInfo 对 象 时 关联 的 Type 对 象 也 查询 出 来 了 。 


15.4 ”基于 注解 的 多 对 多 关联 映射 


以 13.3 小 节 使 用 的 数据 表 admin_info 和 functions 为 例 ， 基 于 注解 配置 实现 这 两 张 表 之 
间 的 多 对 多 关联 映射 ， 具 体 步 骤 如 下 所 示 。 

(1) 将 项 目 mybatis6 中 与 数据 表 admin_info 和 functions 对 应 的 实体 类 AdminInfo .java 
和 Functions ,java 复制 到 项 目 mybatis8 的 com.mybatis pojo 包 中 。 

(2) 在 com.mybatis.mapper 包 中 创建 接口 AdminInfoMapper 和 FunctionsMapper。 在 
FunctionsMapper 接口 中 ， 编 写 如 下 代码 : 


Package com.mybatis.mapper; 
import java.util.List; 
import org.apache.ibatis.annotations.Select; 
import com.mybatis.pojo.Functions; 
public interface FunctionsMapper { 
// 根据 管理 员 id 获取 其 功能 权限 列表 
@Select ("select * from functions where id in (select fid from powers where 
aid = #{id} )") 
List<Functions> findFunctionsBYRid(int aid) 


} 


在 FunctionsMapper 接口 中 , 声明 了 一 个 findFunctionsByAid 方法 , 使 用 @Select 注解 映 
射 了 一 个 包含 子 查 询 的 select 语句 ， 根 据 管理 员 编 号 获取 其 功能 权限 列表 。 
在 AdminInfoMapper 接口 中 ， 编 写 如 下 代码 : 


package com.mybatis.mapper; 

import org.apache.ibatis.annotations.Many; 

import org.apache.ibatis.annotations.Result; 

import org.apache.ibatis.annotations.Results; 

import org.apache.ibatis.annotations.Select; 

import com.mybatis.pojo.AdminInfo; 

public interface AdminInfoMapper { 
// 根据 管理 员 ia 查询 管理 员 信息 
select ("select * from admin info where id = #{id} ") 
QQResults ({ 


@Result (id = true, column = "id", property = "id"), 
@Result (column = "name", property = "name"), 
@Result (column = "id", property = "fs", 


many = @Many (select = 
"com.mybatis.mapper.FunctionsMapper.findFunctionsByAid")) }) 
public AdminInfo findAdminInfoById (int id); 


; 
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在 AdminInfoMapper 接口 中 ， 声 明了 一 个 findAdminInfoByld 方法 ， 使 用 @Select 注解 
映射 一 个 select 语句 ， 根 据 管理 员 编号 查询 管理 员 对 象 。 

如 果 想 将 AdminInfo 关联 的 Functions 对 象 也 查 出 来 ， 可 以 使 用 @Results 注解 手工 完成 
关联 属性 的 映射 。 在 @Results 注解 中 ， 添 加 了 三 个 @Result 注解 。 前 两 个 @Result 注解 用 于 
完成 AdminInfo 对 象 的 基本 属性 id 和 name 与 数据 表 admin info 的 id 和 name 字段 的 映射 ， 
最 后 一 个 @Result 注解 用 于 关联 属性 的 映射 。 在 最 后 一 个 @Result 注解 中 ，property 属性 用 
来 指定 关联 属性 ， 这 里 为 ft; many 属性 用 来 指定 数据 表 属 于 哪 种 关联 关系 ， 通 过 @Many 
注解 表明 数据 表 admin_info 和 functions 之 间 是 一 对 多 关联 关系 。 在 @Many 注解 中 ，select 
属性 用 于 指定 关联 属性 全 的 值 是 通过 执行 com.mybatis.mapper 包 中 FunctionsMapper 接口 里 
定义 的 findFunctionsByAid 方法 获得 的 。@Result 注解 的 column 属性 设置 为 id， 表 示 传 入 
findFunctionsByAid(int aid) 方 法 的 参数 为 从 数据 表 admin_info 查询 出 的 id 字段 值 。 

(3) 添加 接口 文件 的 引用 。 

在 mybatis-config .xml 文件 中 ， 添 加 对 接口 AdminInfoMapper 和 FunctionsMapper 的 引 
用 ， 如 下 所 示 : 

<!-- 引用 接口 --> 


<mappers> 


<mapper class="com.mybatis.mapper.FunctionsMapper" /> 
<mapper class="com.mybatis.mapper.AdminInfoMapper" /> 
</mappers> 


(4) 测试 多 对 多 关联 映射 。 
在 测试 类 MybatisTest 中 ， 添 加 测试 方法 testM2M， 使 用 @Test 注解 修饰 ， 查 看 管理 员 
及 其 功能 权限 。 其 代码 如 下 : 


@Test 
Public void testM2M() { 
// 获得 adminInfoMapper 接口 的 代理 对 象 
RdminInfoMapper aim = sqlSession.getMapper (AdminInfoMapper .class) 
// 直接 调用 接口 的 方法 ， 查 询 AdminInfo 对 象 及 关联 的 Functions 对 象 
AdminInfo admin = aim.findAdminInfoById (1); 
System.out.println (admin); 
} 


执行 测试 方法 testM2M， 控 制 台 输 出 如 下 所 示 : 


DEBUG [main] - ==> Preparing: select * from admin _ info where id = ? 
DEBUG [main] - ==> Parameters: 1(Integer) 

DEBUG [main] - ====> Preparing: select * from functions where id in (select 
fid from powers where aid = ? ) 

DEBUG [main] - ====> Parameters: 1(Integer) 

DEBUG [main] - < Total: 10 


DEBUG [main] - <== Total: 1 
AdminIinfo [id=1l, name=admin, fs=[Functions [id=1, name= 电 子 商 城管 理 后 台 ]， 
Functions [id=2, name= 商 品 管理 ] ， Functions [id=3, name= 商 品 列表 ] ， Functions 
[id=4，name= 商 品类 型 列表 ] ，Functions [id=5，name= 订 单 管理 ] ，Functions [id=6， 
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name= 查 询 订单 ]，Functions [id=7，name= 创 建 订单 ] ，Functions [id=8，name= 用 户 管 
理 ]，Functions [id=9，name= 用 户 列表 ] ，Functions [id=11，name= 退 出 系统 ] ] ] 


可 以 看 到 ， 查 询 AdminInfo 对 象 时 关联 的 Functions 对 象 也 查询 出 来 了 。 


15.5 ”基于 注解 的 动态 SQL 


使 用 MyBatis 的 注解 配置 ， 除 了 可 以 实现 单 表 的 增删 改 查 操作 、 多 表 的 关联 映射 外 ， 
还 可 以 实现 动态 SQL 语句 。MyBatis 提供 了 人 @SelectProvider 、@InsertProvider 、 
@UpdateProvider 和 @DeleteProvider 等 注解 来 构建 动态 SQL 语句 ， 然 后 再 执行 这 些 SQL 语 
句 。 接 下 来 将 以 数据 表 user_info 的 增删 改 查 为 例 来 讲解 这 四 个 注解 。 


15.5.1 @SelectProvider 注解 
@SelectProvider 注解 用 于 生成 查询 所 用 的 SQL 语句 ， 与 @Select 注解 不 同 ， 


@SelectProvide 注解 指定 一 个 类 及 其 方法 ， 并 通过 调用 类 的 这 个 方法 来 获得 SELECT 语句 。 
使 用 @SelectProvider 注解 的 好 处 在 于 ， 可 以 根据 不 同 的 需求 产生 不 同 的 SQL 语句 ， 因 此 适 


用 性 更 好 。 
以 数据 表 user_ info 的 查询 操作 为 例 ， 使 用 @SelectProvider 注解 动态 查询 数据 的 具体 步 
又 如 下 : 


(1) 将 项 目 mybatisl 复制 并 命名 为 mybatis9， 再 导入 到 Eclipse 开发 环境 中 。 
(2) 将 项 目 mybatis9 的 com.mybatis.pojo 包 中 的 映射 文件 UserInfoMapper.xml 删除 。 
(3) 在 com.mybatis.mapper 包 中 ， 新 建 一 个 接口 UserInfoMapper， 并 编写 如 下 代码 : 
Package com.mybatis.mapper; 
import java.util.List; 
import java.util.Map; 
import org.apache.ibatis.annotations.SelectProvider; 
import com.mybatis.pojo.UserInfo7 
public interface UserInfoMapper { 
@SelectProvider (type = UserInfoDynaSqlProvider.class, method = 
"selectwithParam") 


List<UserInfo> findUserInfoBYCond (Map<String, Object> param); 
} 


在 findUserInfoByCond 方法 中 ，Map<String, Object> 类 型 的 参数 param 用 于 封装 查询 条 
件 。 与 @Select 注解 不 同 ， @SelectProvider 注解 没有 直接 提供 映射 的 SQL 语句 ， 而 是 指定 
使 用 另 一 个 UserInfoDynaSqlProvider.java 类 中 定义 的 方法 selectWithParam， 该 方法 提供 需 
要 执行 的 SELECT 语句 。 

(4) 在 com.mybatis.mapper 包 中 ， 新 建 一 个 类 UserInfoDynaSqlProvider ， 并 添加 
selectWithParam 方法 ， 如 下 所 示 : 

Package com.mybatis.mapper; 


import java.util.Map; 
import org.apache.ibatis.jdbc.sQL; 
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Public class UserIinfoDynaSqlProvider { 
public String selectWithParam(Map<String, Object> param) { 
return new SQL() { 
a 
SELECT (™*"); 
FROM ("user info")7 
if (param.get ("id") != null) { 
WHERE ("id = #{id} "); 
if (param.get ("userName") != null) { 
WHERE ("userName = #{userName} "); 
， 
if (param.get ("password") != null) { 
WHERE ("password = #{password} "); 
} 
} 
}.tostring(); 


} 


在 selectWithParam(Map<String, Object> param) 方 法 中 ， 根 据 参 数 param 中 的 内 容 构建 
动态 SELECT 语句 。 

(5) 添加 接口 文件 的 引用 。 

在 mybatis-config.xml 文件 中 ， 先 将 原先 引用 的 映射 文件 UserInfoMapper.xml 删除 或 注 
释 掉 ， 再 添加 对 接口 UserInfoMapper 的 引用 ， 如 下 所 示 : 


<!-- 引用 接口 文件 --> 


<mappers> 

<!-- <mapper resource="com/mybatis/mapper/UserInfoMapper.xml" /> --> 
<mapper class="com.mybatis.mapper.UserInfoMapper" /> 

</mappers> 


(6) 添加 测试 方法 。 
在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testfindUserInfoByCond， 使 用 @Test 注解 
修饰 ， 编 写 如 下 代码 : 


// 测试 基于 注解 的 动态 S&L 语句 之 eselectProvider 注解 
@Test 
public void testfindUserInfoByCond() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper .class) 7 
// 使 用 Map 类 型 对 象 封 装 查询 条 件 
Map<String，Object> param = new HashMap<String, Object>(); 
param.put ("userName", "tom"); 
param.put ("password", "123456"); 
// 直接 调用 接口 的 方法 
List<UserIinfo> uis = uim.findtUserInfoByCond (param); 
for (UserInfto ui : uis) { 
// 打印 输出 结果 


System.out.println(ui.tostring()); 
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执行 测试 方法 testfindUserInfoByCond， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: SELECT * FROM user info WHERE (userName = ? 
AND password = ? ) 

DEBUG [main] - ==> Parameters: tom(String)，123456(String) 

DEBUG [main] - <== Total: 1 


UserInfo [id=1l, userName=tom, password=123456] 


可 以 看 出 ， 由 于 Map 中 设置 了 userName 和 password 两 个 参数 ， 因 此 执行 的 SQL 语句 
中 包含 这 两 个 条 件 。 如 果 Map 中 只 设置 userName 参数 ， 则 控制 台 输 出 的 SQL 语句 中 只 包 
含 userName 这 个 条 件 ， 如 下 所 示 : 


DEBUG [main] - ==> Preparing: SELECT * FROM user info WHERE (userName = ? ) 


当然 ，UserInfoDynaSqlProvider 类 中 的 selectWithParam 方法 也 可 以 传递 UserInfo 类 型 
对 象 作为 参数 。 也 就 是 说 , 动态 SQL Provider 方法 可 以 无 参 ， 也 可 用 Java 对 象 或 Map 对 象 
作为 参数 。 


15.5.2 @InsertProvider 注解 


@InsertProvider 注解 用 于 生成 插入 数据 所 用 的 SQL 语句 ， 与 @Insert 注解 不 同 ， 
@InsertProvider 注解 指定 一 个 类 及 其 方法 ， 并 通过 调用 类 的 这 个 方法 来 获得 NSERT 语句 。 

以 数据 表 user info 的 插入 操作 为 例 ， 使 用 @InsertProvider 注解 动态 添加 数据 的 具体 步 
又 如 下 : 

(1) 在 接口 UserInfoMapper 中 ， 添 加 一 个 insertUserInfo 方法 ， 如 下 所 示 : 


@InsertProvider (type = UserInfoDynaSqlProvider.class, method = 
"insertUserInfo") 

Q@Options (useGeneratedKeys = true, keyProperty = "id") 

int insertUserInfo (UserInfo ui); 


数据 表 user_info 有 一 个 自 增 的 主键 i4， 为 了 能 在 插入 数据 后 自动 获取 该 主键 值 ， 可 以 
使 用 @Options 注解 返回 添加 的 主键 值 。@Options 注解 的 keyProperty 属性 用 来 设置 主键 对 
应 的 字段 名 ， 这 里 为 id; 将 useGeneratedKeys 属性 设置 为 true。 这样， 在 向 数据 表 user_info 
插入 数据 时 ， 自 动 将 主键 字段 id 的 自 增值 赋值 给 对 象 ui 的 属性 id。 

@InsertProvider 注解 指定 UserInfoDynaSqlProvider 类 中 定义 的 方法 insertUserInfo， 由 
该 方法 提供 需要 执行 的 INSERT 语句 。 

(2) 在 UserInfoDynaSqlProvider 类 中 ， 添 加 一 个 insertUserInfo 方法 ， 如 下 所 示 : 

public String insertUserInfo (UserInfo ui) { 

return new SQL () { 
{ 
INSERT INTO("user info"); 
if (ui.getUserName() != null) { 
VALUES ("userName", "#{userName}"); 


} 
if (ui.getPassword() != null) { 
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VALUES ("password", "#{password}"); 
} 
人 
} .toString() 7 


} 


在 insertUserInfo(UserInfo ui) 方 法 中 ， 根 据 参数 ui 中 的 内 容 构 建 动态 INSERT 语句 。 

(G3) 添加 测试 方法 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testInsertUserInfo， 使 用 @Test 注解 修饰 ， 
编写 如 下 代码 。 


// 测试 基于 注解 的 动态 SQL 语句 之 86InsertProvider 注解 
@Test 
Public void testInsertUserInfo() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper.class) 
// 创建 UserInfo 对 象 并 初始 化 
UserInfo ui = new UserInfo(); 
ui.setUserName ("mybatis2"); 
ui.setPassword("123456"); 
// 直接 调用 接口 的 方法 
uim.insertUserIinfo (ui); 
// 输出 数据 表 user_info 中 新 插入 记录 的 ia 
System.out.println(" 插 入 的 用 户 编号 : "+ ui.getId()) 7 
} 


执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: INSERT INTO user info (userName, password) 
VALUES (?, ?) 

DEBUG [main] - = 
DEBUG [main] - < 


插入 的 用 户 编号 : 9 
读者 可 以 通过 只 设置 userName 或 password 参数 ， 来 观察 控制 台中 的 SQL 语句 。 


15.5.3”@UpdateProvider 注解 


> Parameters: mybatis2(String), 123456 (String) 
= Updates: 1 


@UpdateProvider 注解 用 于 生成 更 新 所 用 的 SQL 语句 ， 与 @Update 注解 不 同 ， 
@UpdateProvider 注解 指定 一 个 类 及 其 方法 ， 并 通过 调用 类 的 这 个 方法 来 获得 UPDATE 


语句 。 

以 数据 表 user info 的 更 新 操作 为 例 , 使 用 @UpdateProvider 注解 动态 更 新 数据 的 具体 步 
又 如 下 : 

(1) 在 接口 UserInfoMapper 中 ， 添 加 一 个 updateUserInfo 方法 ， 代 码 如 下 : 

// 更 新 数据 


QUpdateProvider (type = UserIinfoDynaSqlProvider.class, method = 
”updateUserInfo") 
int updateUserInfo (UserInfo ui); 
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@InsertProvider 注解 指定 了 UserInfoDynaSqlProvider 类 中 定义 的 方法 updateUserInfo， 
由 该 方法 提供 需要 执行 的 UPDATE 语句 。 
(2) 在 UserInfoDynaSqlProvider 类 中 ， 添 加 一 个 updateUserInfo 方法 ， 代 码 如 下 : 


public String updateUserInfo (UserInfo ui) { 
return new SOL () { 
和 
UPDATE ("user info"); 
if (ui.getUserName() != null) { 
SET("userName = #{userName}"); 
+ 
if (ui.getPassword() != null) { 
SET("password = #{password}"); 
} 
WHERE ("id = #{id} "); 
} 
}.tostring(); 
} 


在 updateUserInfo(UserInfo ui) 方 法 中 ， 根 据 参数 ui 中 的 内 容 构 建 动态 UPDATE 语句 。 

(3) 添加 测试 方法 。 

在 测试 类 MybatisTest 中 ,添加 一 个 测试 方法 testUpdateUser, 使 用 @Test 注解 修饰 ， 编 
写 如 下 代码 : 


// 测试 基于 注解 的 动态 SQL 语句 之 6eUpdateProvider 注解 
@Test 
public void testUpdateUser() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper.class); 
// 使 用 Map 封装 查询 条 件 
Map<String, Object> param = new HashMap<string, Object>(); 
Param.put ("id™", “1i")? 
// 直接 调用 接口 的 方法 ， 查 询 id 为 1 的 用 户 
UserInfo ui = uim.findUserIinfoByCond (param) .get (0); 
// 修改 该 用 户 的 密码 
ui.setPassword("666666"); 
// 直接 调用 接口 的 方法 ， 更 新 用 户 信息 
uim.updateUserInfo (ui); 


} 

在 该 测试 方法 中 ,使 用 Map 对 象 封装 了 id 为 1 的 用 户 编号 作为 查询 条 件 ， 先 根据 用 户 
编号 获取 用 户 信 息 ， 再 重新 设置 密码 ， 最 后 更 改 用 户 信息 。 

执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: SELECT * FROM user info WHERE (id = ? ) 
DEBUG [main] 一 


> Parameters: 1(String) 


DEBUG [main] 一 votalks 1 

DEBUG [main] - ==> Preparing: UPDATE user info SET userName = ?, password 
= ? WHERE (id = ? ) 

DEBUG [main] - ==> Parameters: tom(String)，666666(String)，1(Integer) 
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此 时 ， 打 开 数 据 表 user info， 可 以 看 到 编号 为 1 的 用 户 的 密码 已 被 成 功 修改 。 


15.5.4 @DeleteProvider 注解 


@DeleteProvider 注解 用 于 生成 删除 所 用 的 SQL 语句 ， 与 @Delete 注解 不 同 ， 
@DeleteProvider 注解 指定 一 个 类 及 其 方法 ,并 通过 调用 类 的 这 个 方法 来 获得 DELETE 语句 。 
以 数据 表 user_info 的 删除 操作 为 例 ， 使 用 @DeleteProvider 注解 动态 删除 数据 的 具体 步 


又 如 下 : 
(1) 在 接口 UserInfoMapper 中 ， 添 加 一 个 deleteUserInfo 方法 ， 如 下 所 示 : 
// 删除 数据 


@DeleteProvider (type = UserInfoDynaSsqlProvider.class, method = 
"deleteUserInfo") 
void deleteUserInfo (Map<String, Object> Param) 


@DeleteProvider 注解 指定 了 UserInfoDynaSqlProvider 类 中 定义 的 方法 deleteUserInfo， 


由 该 方法 提供 需要 执行 的 DELETE 语句 。 
(2) 在 UserInfoDynaSqlProvider 类 中 ， 添 加 一 个 deleteUserInfo 方法 ， 如 下 所 示 : 


public String deleteUserInfo(Map<String, Object> param) { 
return new SQL () { 
{ 
DELETE FROM("user info"); 
if (param.get ("id") != null) { 
WHERE (wid = #{id} "); 
} 
if (param.get ("userName") != null) { 
WHERE ("userName = #{userName} "); 
} 
if (param.get ("password") != null) { 
WHERE ("password = #{password} "); 
} 
} 
}.tostring(); 
} 


在 deleteUserInfo(Map<String, Object> param) 方 法 中 ， 根 据 参 数 param 中 的 内 容 构 建 动 
态 DELETE 语句 。 

(3) 添加 测试 方法 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testDeleteUser， 使 用 @Test 注解 修饰 ， 编 
写 如 下 代码 : 

// 测试 基于 注解 的 动态 SQL 语句 之 8eDeleteProvider 注解 


@Test 
public void testDeleteUser() { 
// 获得 UserInfoMapper 接口 的 代理 对 象 


UserInfoMapper uim = sqlSession.getMapper (UserIinfoMapper.class); 
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// 使 用 Map 封装 查询 条 件 

Map<Sstring, Object> param = new HashMap<Sstring, Object>(); 
param.put ("userName", "mybatis2"); 

param.put ("password", "123456"); 

// 直接 调用 接口 的 方法 ， 删 除 符合 条 件 的 用 户 


uim.deleteUserInfo (param); 


} 

在 该 测试 方法 中 ， 首 先 使 用 Map 封装 了 用 户 名 和 密码 这 两 个 查询 条 件 ， 然 后 调用 接口 
的 方法 ， 删 除 符合 条 件 的 用 户 。 

执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: DELETE FROM user info WHERE (userName = ? AND 
password = ? ) 


DEBUG [main] - ==> Parameters: mybatis2(String)，123456(String) 

DEBUG [main] - <== Updates: 1 

此 时 ， 打 开 数 据 表 user_ info， 可 以 看 到 用 户 名 为 mybatis2、 密 码 为 123456 的 用 户 已 被 
成 功 删除 。 


15:67 小 结 


本 章 首先 介绍 了 MyBatis 框架 的 注解 配置 ， 然 后 结合 具体 示例 ， 基 于 注解 讲解 了 单 表 
的 增删 改 查 、 多 表 的 关联 映射 和 动态 SQL 语句 等 知识 。 在 MyBatis 框架 中 ， 熟 练 使 用 注解 
配置 ， 可 以 简化 程序 的 开发 ， 从 而 提高 开发 效率 。 


< Sd ds a de 


MyBatis 缓存 


为 了 有 效 地 提高 数据 库 查 询 的 性 能 ，MyBatis 提供 了 查询 缓存 。MyBatis 缓存 分 为 一 级 
缓存 和 二 级 缓存 。 


16.1 一 级 缓存 


MyBatis 的 一 级 缓存 是 SqlSession 级 别 的 缓存 ， 当 在 同一 个 SqlSession 中 执行 两 次 相同 
的 SQL 语句 时 ， 会 将 第 一 次 执行 查询 的 数据 存 入 一 级 缓存 中 ， 第 二 次 查询 时 会 从 缓存 中 获 
取 数 据 , 而 不 用 再 去 数据 库 查 询 , 从 而 提高 了 查询 性 能 。 但 如 果 SqlSession 执行 insert、 delete 
和 update 操作 ， 并 提交 到 数据 库 ， 或 者 SqlSession 结束 后 ， 这 个 SqlSession 中 的 一 级 缓存 
就 不 存在 了 。 

下 面 通过 示例 测试 MyBatis 的 一 级 缓存 。 

(1) 将 项 目 es ee 再 
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(G3) 添加 测试 方法 。 

在 测试 类 MybatisTest 中 , 添加 一 个 测试 方法 testFirstLevelCache, 使 用 @Test 注解 修饰 ， 
编写 如 下 代码 : 

// 测试 一 级 缓存 1 


@Test 

public void testFirstLevelCache() { 
// 获得 UserInfoMapperd 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserInfoMapper.class) 7 
// 查询 id=1 的 UserInfo 对 象 
UserInfo uil = uim.findUserInfoById(1); 
System.out.println (uil.tostring()); 
// 再 次 查询 id=1 的 UserInfo 对 象 
UserInfo ui2 = uim.findUserInfoById(1) 
System.out.println (ui2.tostring()); 

} 


执行 该 测试 方法 ， 控 制 台 输出 如 下 : 


DEBUG [main] - ==> Preparing: select * from user info where id=? 
DEBUG [main] - ==> Parameters: 1(Integer) 
DEBUG [main] - <== Total: 1 


UserInfo [id=1, userName=tom, password=666666] 
UserInfo [id=1l, userName=tom, password=666666] 


可 以 看 出 ， 第 一 次 查询 id 为 1 的 UserInfo 对 象 时 发 出 了 一 条 SQL 语句 ， 由 于 MyBatis 
默认 开启 了 一 级 缓存 ， 因 此 一 级 缓存 SqlSession 中 缓存 了 id 为 1 的 UserInfo 对 象 。 第 二 次 
再 查询 id 为 1 的 UserInfo 对 象 时 ， 直 接 从 一 级 缓存 中 获取 数据 ， 而 不 用 查询 数据 库 ， 所 以 
第 二 次 没有 发 出 select 语句 。 

在 测试 类 MybatisTest 中 ， 添 加 一 个 测试 方法 testFirstLevelCache_ 1， 并 使 用 @Test 注解 
修饰 ， 编 写 如 下 代码 : 

// 测试 一 级 缓存 2 


@Test 

public void testFirstLevelCache 1() { 
// 获得 UserInfoMapperd 代理 对 象 
UserInfoMapper uim = sqlSession.getMapper (UserIinfoMapper.class); 
// 查询 id=1 的 UserInfo 对 象 
UserInfo uil = uim.findUserInfoById (1) 
System.out.println (uil.tostring()); 
sqlSession.commit (); 
// 关闭 sqlsession， 即 清空 一 级 缓存 
sqlSession.close(); 
// 开始 一 个 新 的 sqlsession 
sqlSession = sqlSessionFactory.openSession(); 
// 再 次 获得 UserInfoMapperd 代理 对 象 
uim = sqlSession.getMapper (UserIinfoMapper.class); 
// 再 次 查询 id=1 的 UserInfo 对 象 
UserInfo ui2 = uim.findUserIinfoById(1); 
System.out.println (ui2.tostring()); 

本 
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在 测试 方法 testFirstLevelCache 1 中 ， 第 一 次 查询 后 关闭 SqlSession, 然后 开启 一 个 新 
的 SqlSession， 再 次 执行 查询 。 

执行 该 测试 方法 ， 控 制 台 输出 如 下 : 

DEBUG [main] - ==> Preparing: select * from user info where id = ? 

DEBUG [main] - ==> Parameters: 1(Integer) 


DEBUG [main] - <== Totals: 
UserInfo [id=1l, userName=tom, password=666666] 


DEBUG [main] - Resetting autocommit to true on JDBC Connection 
[com.mysql .jdbc.JDBC4Connection@5f0fd5a0] 

DEBUG [main] - Closing JDBC Connection 
[com.mysql.jdbc.JDBC4Connection@5f0fd5a0] 

DEBUG [main] - Returned connection 1594873248 to pool. 

DEBUG [main] - Opening JDBC Connection 

DEBUG [main] - Checked out connection 1594873248 from pool. 


DEBUG [main] - Setting autocommit to false on JDBC Connection 
[com.mysql .jdbc.JDBC4Connection@5f0fd5a0] 
DEBUG [main] - ==> Preparing: select * from user info where id = ? 


DEBUG [main] 一 > Parameters: 1(Integer) 

DEBUG [main] - <== Total:s 1 

UserInfo [id=1，userName=tom password=666666] 

可 以 看 出 ,关闭 SqlSession 后 一 级 缓存 会 被 清空 ， 所 以 第 二 次 查询 时 ， 一 级 缓存 中 查询 
不 到 数据 ， 发 出 了 第 二 条 select 语句 查询 数据 库 。 


16.2 二 级 缓存 


MyBatis 的 二 级 缓存 是 mapper 级 别 的 缓存 ， 多 个 SqlSession 共用 二 级 缓存 ， 它 们 使 用 
同一 个 Mapper 的 SQL 语句 操作 数据 库 ， 获 得 的 数据 会 存放 在 二 级 缓存 中 。 

MyBatis 默认 没有 开启 二 级 缓存 ， 需 要 在 MyBatis 的 配置 文件 mybatis-config.xml 中 开 
启 二 级 缓存 ， 配 置 如 下 : 

<!-- 启用 二 级 缓存 --> 


<settings> 


<setting name="cacheEnabled" value="true" /> 
</settings> 
需要 注意 的 是 ，settings 元 素 要 放 在 properties 元 素 之 后 ，typeAliases 元 素 之 前 ， 否 则 配 
置 文件 会 报错 。 
此 外 ， 还 需要 在 UserInfoMapper.xml 映射 文件 中 ， 使 用 <cache> 元 素 开启 当前 mapper 
的 Damespace 下 的 二 级 缓存 ， 如 下 所 示 : 


<cache eviction="LRU" flushIinterval="30000" size="512" readOonly="true" /> 

这 样 ，UserInfoMapper.xml 下 的 SQL 语句 执行 结束 后 ， 会 将 结果 存储 到 它 的 二 级 缓存 
中 。<cache> 元 素 配 置 在 <mapper> 元 素 内 ，<cache> 元 素 的 属性 含义 如 下 。 

@ fushImterval 属性 : 表示 刷新 间隔 ， 可 以 被 设置 为 任意 正 整数 ， 单 位 是 毫秒 。 默 认 
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不 设置 ， 表 示 没 有 刷新 间隔 ， 仅 仅 调用 语句 时 刷新 缓存 。 

@ size 属性 : 表示 引用 数目 ， 可 以 被 设置 为 任意 正 整数 ， 默 认 值 是 1024。readOnly 
属性 设置 是 否 只 读 ，true 表示 只 读 ，false 表示 可 读 写 。 只 读 的 缓存 会 给 所 有 调用 者 返回 组 
存 对 象 的 相同 实例 ， 因 此 这 些 对 象 不 能 被 修改 ， 这 提供 了 重要 的 性 能 优势 。 可 读 写 的 缓存 
会 返回 缓存 对 象 的 拷贝 ， 这 会 慢 一 些 ， 但 是 安全 ， 因 此 默认 是 false。 

@@ eviction 属性 : 表示 收回 策略 ， 有 LRU、FIFO、SOFT、WEAK 等 策略 ， 默 认为 
LRU。LRU 表示 最 近 最 少 使 用 策略 , 即 移 除 最 近 最 少 使 用 的 对 象 。FIFO 表示 先进 先 出 策略 ， 
按 对 象 进入 缓存 的 顺序 来 移 除 。SOFT 表示 软 引 用 策略 ， 移 除 基 于 垃圾 回收 器 状态 和 软 引 用 
规则 的 对 象 。WEAK 表示 弱 引 用 策略 ， 更 积极 地 移 除 基于 垃圾 收集 器 状态 和 弱 引 用 规则 的 


对 象 。 
再 次 执行 测试 类 MybatisTest 中 的 测试 方法 testFirstLevelCache_ 1， 控制 台 输出 如 下 : 
DEBUG [main] - ==> Preparing: select * from user info where id = ? 
DEBUG [main] - ==> Parameters: 1(Integer) 
DEBUG [main] - <== Totals: 1 


UserInfo [id=1，userName=tom password=666666] 

DEBUG [main] - Resetting autocommit to true on JDBC Connection 
[com.mysql.jdbc.JDBC4Connectionee3c0e40] 

DEBUG [main] - Closing JDBC Connection 
[com.mysql.jdbc.JDBC4Connectionee3c0e40] 

DEBUG [main] - Returned connection 238816832 to pool. 

DEBUG [main] - Cache Hit Ratio [com.mybatis.mapper.UserIinfoMapper]: 0.5 
UserInfo [id=l1l, userName=tom, password=666666] 


可 以 看 出 ， 第 一 次 查询 id 为 1 的 UserInfo 对 象 时 执行 了 一 条 select 语句 ， 然 后 关闭 
SqlSession， 一 级 缓存 被 清空 。 第 二 次 查询 id 为 1 的 UserInfo 对 象 时 ， 先 查找 一 级 缓存 ， 没 
有 找到 id 为 1 的 UserInfo 对 象 ， 再 去 查找 二 级 缓存 ， 找 到 了 id 为 1 的 UserInfo 对 象 ， 所 以 
不 会 再 次 执行 select 语句 。 

在 映射 文件 UserInfoMapper.xml 中 ， 如 果 给 id 为 fmdUserInfoById 的 <select> 元 素 添加 
useCache="false" 属 性 值 , 则 表示 禁用 当前 select 语句 的 二 级 缓存 , 即 每 次 查询 都 会 发 出 SQL 
语句 。useCache 属性 默认 值 为 tue， 表 示 该 SQL 语句 使 用 二 级 缓存 。 

再 次 执行 测试 方法 testFirstLevelCache 1， 观察 控制 台 输 出 。 由 于 该 select 语句 禁用 了 
二 级 缓存 ， 因 此 第 二 次 查询 时 会 再 次 发 出 select 语句 。 


16.3 小 结 


本 章 首 先 介绍 了 MyBatis 框架 的 缓存 概念 ， 然 后 结合 具体 示例 ， 详 细 讲 解 了 MyBatis 
框架 的 一 级 缓存 和 二 级 缓存 的 用 法 。 在 MyBatis 框架 中 ， 合 理 使 用 缓存 ， 可 以 极 大 地 减少 
资源 的 消耗 ， 从 而 提高 系统 的 性 能 。 
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MyBatis 与 Hibernate 一样 ， 也 是 非常 优秀 的 持久 层 框架 。 在 框架 整合 开发 时 ， 也 会 选 
择 MyBatis 替代 Hibernate。 本 章 以 登录 功能 为 例 ， 采 用 注解 方式 实现 Spring 与 MyBatis 框 
架 的 整合 。 从 实质 上 来 说 ，Spring 与 MyBatis 的 整合 也 就 是 Spring、Spring MVC 与 MyBatis 
的 整合 ， 通 常 简称 SSM 框架 整合 。 


17.1 环境 搭建 


在 Eclipse 中， 新 建 一 个 名 为 ssm 的 Maven 项 目 ， 如 图 17-1 所 示 。 单 击 Next 按钮 ， 打 
开 New Maven Project 对 话 框 ， 选 中 Create a simple project 复 选 框 ， 如 图 17-2 所 示 。 
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单 击 Next 按钮 ， 进 入 项 目 配置 界面 ， 设 置 Group Id 为 com.my，Artifact Id 为 ssm， 
Packaging 为 war， 如 图 17-3 所 示 。 单 击 Finish 按钮 ， 完 成 项 目的 创建 。 项 目 最 初 目 录 结 构 
如 图 17-4 所 示 。 在 项 级 目录 上 是 工程 的 描述 文件 pom.xml， 它 是 Maven 项 目的 核心 配置 文 
件 。 顶 级 目录 还 包括 src 和 target 两 个 子 目录 ，target 目录 是 所 有 工程 编译 构建 的 输出 目录 ， 
src 目录 包含 所 有 工程 的 源码 文件 、 配 置 文件 、 资 源 文件 等 等 。src 目录 的 子 目录 main/java 
用 于 存放 Java 源 文件 , 子 目 录 main/resources 用 于 存放 框架 或 其 他 工具 的 配置 文件 , 子 目录 
test/java 用 于 存放 Java 测试 的 源 文件 , 子 目 录 test/resources 用 于 存放 测试 的 配置 文件 , 子 目 
录 main/webapp 是 Web 应 用 的 目录 ， 里 面 可 以 包含 WEB-INF、js 和 css 等 内 容 。 

在 Eclipse 包 资 源 管理 器 窗口 中 , 右 击 项 目 名 ssm, 选择 Properties 命令 , 打开 Properties 
for ssm 对 话 框 。 在 对 话 框 的 左 侧 区 域 ， 选 择 Project Facets 菜单 项 ， 右 侧 会 显示 项 目 ssm 的 
相关 特性 , 如 图 17-5 所 示 。 创 建 项 目 ssm 时 , 默认 的 Dynamic Web Module 版 本 为 2.5, Java 
版 本 为 1.5， 可 根据 需要 将 它们 设置 为 相应 的 版 本 。 这 里 先 将 Java 版 本 设置 为 9; 然后 取消 
Dynamic Web Module 复 选 框 的 选中 状态 ， 并 单 击 一 次 Apply 按钮 ， 接 着 选中 Dynamic Web 
Module 复 选 框 , 将 其 版 本 选择 为 3.1， 此 时 会 出 现 Futher configuration available... 这 个 链接 。 
单 击 此 链接 ， 打 开 Modify Faceted Project 对 话 框 ， 如 图 17-6 所 示 。 

单 击 Next 按钮 ， 打 开 Configure web module settings 界面 ， 如 图 17-7 所 示 。 将 
Content directory 设置 为 src/main/webapp， 选 中 Generate web.xml deployment descriptor 复 选 
框 ， 最 后 单 击 OK 按钮 ， 此 时 会 返回 到 图 17-5 所 示 的 界面 ， 单 击 Apply And Close 按钮 。 
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图 17-6 修改 项 目 特性 对 话 框 


至 此 ， 一 个 Maven 项 目 就 算 真正 创建 好 了 。 接 下 来 ， 就 需要 给 项 目 添加 SSM 框架 所 需 
的 jar 包 了 。 打 开 pomxml 文件 ， 在 <projec 人 > 元 素 中 添加 一 个 <dependencies> 元 素 。 在 
<dependencies> 元 素 内 , 通过 添加 多 个 <dependency> 子 元 素来 引入 多 个 jar 包 。 最 后 , pom.xml 


文件 内 容 如 下 : 


17-7 ”Configure web module settings 界面 


<project xmlns="http://maven.apache.org/POM/4.0.0" 
xmlns:xsi="http://www.w3.o0rg/2001/XMLSchema-instance™" 
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xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 


http://maven.apache.org/xsd/maven-4.0.0.xsd"> 
<modelVersion>4.0.0</modelVersion> 
<groupId>com.my</groupId> 
<artifactId>ssm</artifactId> 
<version>0.0.1-SNAPSHOT</version> 
<packaging>war</packaging> 
<dependencies> 
< 一 = Serviet APLI 一 = 
<dependency> 
<groupId>javax.servlet</groupId> 
<artifactId>servlet-api</artifactId> 
<version>3.0-alpha-1</version> 
<scope>provided</scope> 
</dependency> 
<!-- https://mvnrepository.com/artifact/org.springframework/spring-web --> 
<dependency> 
<groupId>org.springframework</groupId> 
<artifactId>spring-web</artifactId> 
<version>5.0.3.RELEASE</version> 


</dependency> 

<!-- Spring SpringMVC --> 

<!-- https://mvnrepository.com/artifact/org.springframework/ 
spring-webmvc --> 

<dependency> 


<groupId>org.springframework</groupId> 
<artifactId>spring-webmvc</artifactId> 
<version>5.0.3.RELEASE</version> 


</dependency> 

<!-- Spring JDBC --> 

<!-- https://mvnrepository.com/artifact/org.springframework/ 
spring-jdbc --> 

<dependency> 


<groupId>org.springframework</groupId> 
<artifactId>spring-jdbc</artifactId> 
<version>5.0.3.RELEASE</version> 


</dependency> 

<!-- Spring Aspects 一 -> 

<!-- https://mvnrepository.com/artifact/org.springframework/ 
spring-aspects 一 -> 

<dependency> 


<groupId>org.springframework</groupId> 
<artifactId>spring-aspects</artifactId> 
<version>5.0.3.RELEASE</version> 


</dependency> 

<!-— MyBatis —-> 

<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --> 
<dependency> 


<groupId>org-mybatis</groupId> 
<artifactId>mybatis</artifactId> 
<version>3.4.5</version> 
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</dependency> 
<!-— MyBatis Spring --> 
<!-- https://mvnrepository.com/artifact/org.mybatis/mybatis-spring --> 
<dependency> 
<groupId>org-mybatis</groupId> 
<artifactId>mybatis-spring</artifactId> 
<version>1.3.1</version> 
</dependency> 
a 
<!-- https://mvnrepository.com/artifact/c3p0/c3p0 --> 
<dependency> 
<groupId>c3p0</groupId> 
<artifactId>c3p0</artifactId> 
<version>0.9.1.2</version> 
</dependency> 
<!-- MySQL 驱动 包 --> 
<!--https://mvnrepository.com/artifact/mysql/mysql-connector-java --> 
<dependency> 
<groupId>mysql</groupId> 
<artifactIid>mysql-connector-java</artifactId> 
<version>5.1.45</version> 
</dependency> 
< BIE 一 = 
<!-- https://mvnrepository.com/artifact/jstl1/jstl --> 
<dependency> 
<groupId>jstl</groupId> 
<artifactId>jstl</artifactId> 
<version>1.2</version> 
</dependency> 
<!-- https://mvnrepository.com/artifact/com.googlecode.json- 
simple/json-simple --> 
<dependency> 
<groupId>com.googlecode.json-simple</groupId> 
<artifactId>json-simple</artifactId> 
<version>1.1</version> 
</dependency> 
<!-- https://mvnrepository.com/artifact/commons-fileupload/ 
commons-fileupload --> 
<dependency> 
<groupId>commons-fileupload</groupId> 
<artifactId>commons-fileupload</artifactId> 
<version>1.3.3</version> 
</dependency> 
<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --> 
<dependency> 


<groupId>com.google.code.gson</groupId> 
<artifactId>gson</artifactId> 
<version>2.8.2</version> 
</dependency> 
<!-— https://mvnrepository.com/artifact/org.apache.commons/ 
commons-lang3 一 -> 
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<dependency> 


<groupId>org.apache.commons</groupId> 
<artifactId>commons-lang3</artifactId> 
<version>3.7</version> 
</dependency> 
</dependencies> 
</project> 


在 pom.xml 文件 中 ， 依 次 引入 了 servletapi、spring-web、spring-webmvc、spring-jdbc、 
spring-aspects、 mybatis、mybatis-spring、c3p0、mysql-connector-java、jstl、json-simple 、 
commons-fileupload、gson 和 commons-lang3 等 资源 包 。 在 这 些 资源 包 中 ，spring 打头 的 是 
与 Spring 框架 相关 的 资源 包 ，servlet-api 用 于 编写 Servlet，mybatis 是 MyBatis 框架 的 核心 
包 ，mybatis-spring 是 Spring 与 MyBatis 框架 整合 时 使 用 的 包 ，c3p0 是 一 个 库 ， 它 扩展 了 传 
统 的 JDBC 数据 库 连接 池 。mysql-connector-java 是 MySQL 数据 的 驱动 包 ,json-simple 是 Java 
生成 的 JSON 工具 包 ，gson 是 Google 解析 JSON 的 一 个 开源 框架 。 读 者 可 以 根据 实际 项 目 
的 需要 ， 添 加 其 他 必要 的 jar 包 。 

保存 pom.xml 文件 ， 如 果 此 时 电脑 处 于 联网 状态 ， 这 些 资源 包 就 会 从 指定 网 站 下 载 到 
本 地 。 可 以 在 包 资 源 管理 器 中 观察 项 目 ssm， 看 看 是 否 出 现 一 个 Maven Dependencies 目录 。 
展开 这 个 目录 ， 就 可 以 看 到 下 载 好 的 jar 包 了 。 


17.2 编写 SSM 整合 的 相关 配置 文件 


要 想 实 现 Spring、Spring MVC 与 MyBatis 框架 的 整合 ,就 需要 编写 Web 应 用 程序 主 配 
置 文件 web.xml、Spring 配置 文件 和 Spring MVC 配置 文件 。 


1. 编写 web.xml 文件 
web.xml 文件 位 于 src/main/webapp/WEB-INF 目录 中 ， 编 写 后 的 内 容 如 下 : 


<?xml] Version="1.0" encoding="UTF-8"?> 
<web-app xmlns:xsi="http://www.w3.0rg/2001/xXMLSchema-instance" 
xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
http://xmlns.jcp.org/xml/ns/javaee/web-app 3_1.xsd" 
id="WebApp_ID" version="3.1"> 
<!--1、 启 动 Spring 的 容器 --> 
<context-param> 
<param-name>contextConfigLocation</param-name> 
<param-value>classpath:applicationContext.xml</param-Vvalue> 
</context-param> 
<listener> 
<listener-class>org.springframework.web.context.ContextLoaderListener 
</listener-class> 
</listener> 
<!--2、springmvc 的 前 端 控制 器 ， 拦 截 所 有 请 求 --> 
<servlet> 


<servlet-name>dispatcherServlet</servlet-name> 
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<servlet-class>org.springframework.web.servlet.DispatcherServlet 
</servlet-class> 
<load-on-startup>1</load-on-startup> 
</servlet> 
<servlet-mapping> 
<servlet-name>dispatcherServlet</servlet-name> 
<url-pattern>/</url-pattern> 
</servlet-mapping> 
<!-- 3、 字 符 编码 过 滤器 ， 一 定 要 放 在 所 有 过 滤器 之 前 --> 
<filter> 
<filter-name>CharacterEncodingFilter</filter-name> 
<filter-class>org.springframework.web.filter.CharacterEncodingFilter 
</filter-class> 
<init-param> 
<param-name>encoding</param-name> 
<param-value>utf-8</param-value> 
</init-param> 
<init-param> 
<param-name>forceRequestEncoding</param-name> 
<param-value>true</param-value> 
</init-param> 
<init-param> 
<param-name>forceResponseEncoding</param-name> 
<param-value>true</param-value> 
</init-param> 
</filter> 
<filter-mapping> 
<filter-name>CharacterEncodingFilter</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 
<!-- 4、 使 用 Rest 风格 的 URI， 将 页 面 普通 的 post 请 求 转 为 指定 的 delete 或 者 put 请 求 --> 
<filter> 
<filter-name>HiddenHttpMethodFilter</filter-name> 
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter 
</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>HiddenHttpMethodFilter</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 
区 在 ES 
<filter-name>HttpPutFormContentFilter</filter-name> 
<filter-class>org.springframework.web.filter.HttpPutFormContentFilter 
</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>HttpPutFormContentFilter</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 
</web-app> 
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在 web.xml 文件 中 ， 要 实现 Web 项 目 启动 时 让 Spring 容器 也 启动 ， 可 以 配置 一 个 监听 
器 ContextLoaderListener 。 当 项 目 启动 时 ， 它 会 自动 加 载 Spring 的 配置 文件 
applicationContext.xml, 这 个 配置 文件 稍 后 会 作 介绍 。 为 了 能 拦截 所 有 请 求 , 需要 配置 Spring 
MVC 的 前 端 控制 器 ， 这 里 使 用 了 DispatcherServlet， 它 能 够 加 载 Spring MVC 的 配置 文件 
dispatcherServlet-servletxml， 这 个 配置 文件 稍 后 也 会 介绍 。 为 了 处 理 中 文 乱 码 ， 可 以 配置 一 
个 字符 编码 过 滤器 ， 它 通过 CharacterEncodingFilter 类 来 实现 。 如 果 项 目 中 要 使 用 Rest 风格 
的 URI， 可 配置 一 个 HiddenHttpMethodFilter， 将 页 面 普通 的 post 请 求 转 为 指定 的 delete 或 
者 put 请 求 。 


2. 编写 Spring MVC 配置 文件 


在 src/main/webapp/WEB-INF 目录 中 ， 创 建 Spring MVC 配置 文件 ， 文 件 名 为 
dispatcherServlet-servletxml， 编 写 后 的 内 容 如 下 : 


<?xXml version="1.0" encoding="UTF-8"?> 
<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.0rg/2001/xXMLSchema-instance" 
xmlns:context="http://www.springframework.org/schema/context" 
xmlns:mvc="http://www.springframework.org/schema/mvce" 
xsi:schemaLocation="http://www.springframework.org/schema/mvc 
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd 
http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context-4.3.xsd"> 
<!-- 启动 注解 扫描 功能 --> 
<context:component-scan base-package="com.my" 
use-default-filters="false"> 
<!-- 只 扫描 控制 器 --> 
<context:include-filter type="annotation" 
expression="org.springframework.stereotype.Controller"/> 
</context:component-scan> 
<!-- 配 置 视图 解析 器 ， 方 便 页 面 返回 ”--> 
<bean class="org.springframework.web.servlet.view. 
InternalResourceViewResolver"> 
<property name="prefix" value="/"/> 
<property name="suffix" value=".jsp"/> 
</bean> 
<!-- 两 个 标准 配置 “--> 
<!-- 将 springmvc 不 能 处 理 的 请 求 交 给 tomcat --> 
<mvc:default-servlet-handler/> 
<!-- 能 支持 springmvc 更 高 级 的 一 些 功 能 ，JsR303 校 验 ， 快 捷 的 ajax. . .映射 动态 请 求 --> 
<mvc:annotation-driven/> 
</beans> 


与 Spring 配置 文件 类 似 ， 在 Spring MVC 配置 文件 中 ， 也 需要 启动 注解 扫描 功能 ， 让 
Spring 容器 自动 扫描 包含 注解 的 类 , 然后 将 其 注册 到 Bean 容器 中 .为 了 避免 重复 扫描 ,Spring 
MVC 配置 文件 中 只 扫描 控制 器 Controller, 而 将 Dao 和 Service 的 扫描 交 由 Spring 配置 文件 
完成 ,在 Spring MVC 配置 文件 中 , 通过 <context:component-scan> 元 素 和 <context:include-filter> 
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子 元 素 配合 ， 实 现 只 对 包含 @Controller 注解 的 类 进行 扫描 。 在 <context:component-scan> 元 
素 中 ，base-package 属性 用 于 指定 要 扫描 的 包 名 ， 这 里 设置 为 com.my， 表 示 扫 描 com.my 
包 及 其 子 包 中 的 类 ; use-default-filters 属性 用 于 指示 是 否 自动 扫描 带 有 人 @Component、 
@Repository、@Service 和 @Controller 的 类 ， 默 认为 tue， 即 默认 扫描 。 这 里 设置 为 false， 
就 是 不 自动 扫描 。<context:include-filter> 子 元 素 用 来 指定 需要 扫描 的 类 ，expression 属性 设 
置 为 Controller， 表 示 扫 描 含 有 @Controller 注解 的 类 ， 然 后 注册 到 Bean 容器 中 。 

在 Controller 控制 器 方法 执行 后 ， 为 了 方便 页 面 返回 ， 需 要 配置 视图 解析 器 。 这 里 使 用 
InternalResourceViewResolver 类 ， 它 包含 prefix 和 suffix 两 个 属性 ， 分 别 用 于 指定 返回 的 
URL 的 前 后 级 。 

在 配置 文件 web.xml 中 , 由 于 将 DispatcherServlet 请 求 映 射 配置 为 “/”, 因 此 Spring MVC 
将 捕获 Web 容器 所 有 的 请 求 , 包括 静态 资源 的 请 求 。 Spring MVC 会 将 这 些 静 态 资源 当 作 一 
个 普通 请 求 进行 处 理 ， 因 此 找 不 到 对 应 处 理 器 会 导致 错误 。 如 何 让 Spring 框架 能 够 捕获 所 
有 URL 的 请 求 , 同时 又 将 静态 资源 的 请 求 转 由 Web 容器 处 理 ，Spring 团队 提供 了 一 些 解决 
方案 ， 其 中 之 一 就 是 使 用 <mvc:default-servlet-handler/> 元 素 。 在 Spring MVC 的 配置 文件 中 
配 置 <mvc:default-servlet-handler> 后 ， 会 在 Spring MVC 上 下 文中 定义 一 个 
org.springframework.web.servlet.resource.DefaultServletHttpRequestHandler， 它 会 像 一 个 检查 
员 ， 对 进入 DispatcherServlet 的 URL 进行 第 查 ， 如 果 发 现 是 静态 资源 的 请 求 ， 就 将 该 请 求 
转 由 Web 应 用 服务 器 默认 的 Servlet 处 理 , 如 果 不 是 静态 资源 的 请 求 , 才 由 DispatcherServlet 
继续 处 理 。 

为 了 能 支持 Spring MVC 更 高 级 的 一 些 功能 ， 例 如 JSR303 校 验 、 映 射 动态 请 求 等 ， 就 
需 使 用 <mvc:annotation-driven/> ， 它 会 自动 注册 RequestMappingHandlerMapping 和 
RequestMappingHandlerAdapter 两 个 Bean, 这 是 Spring MVC 为 @Controller 分 发 请 求 所 必需 
的 ， 并 且 提 供 了 数据 绑 定 支持 、@NumberFormatannotation 支持 、@DateTimeFormat 支持 、 
@Valid 支持 、 读 写 XML 的 支持 (JAXB) 和 读 写 JSON 的 支持 (默认 Jacksom) 等 功能 。 


3. 编写 Spring 配置 文件 


在 src/main/resources 目录 中 ,创建 Spring 配置 文件 ， 文 件 名 为 applicationContext.xml， 
编写 后 的 内 容 如 下 : 


<?xml] version="1.0" encoding="UTF-8"?> 


<beans xmlns="http://www.springframework.org/schema/beans" 
xmlns:xsi="http://www.w3.0rg/2001/xXMLSchema-instance" 
xmlns:context="http://www.springframework.org/schema/context" 
xmlns:aop="http://www.springframework.org/schema/aop" 
xmlns:tx="http://www.springframework.org/schema/tx" 
Xxsi:schemaLocation="http://www.springframework.org/schema/aop 
http://www.springframework.org/schema/aop/spring-aop-4.3.xsd 
http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd 
http://www.springframework.org/schema/tx 
http://www.springframework.org/schema/tx/spring-tx-4.3.xsd 
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context-4.3.xsd"> 
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<context:component-scan base-package="com.my"> 


<context:exclude-filter type="annotation™" 
expression="org.springframework.stereotype.Controller" /> 
</context:component-scan> 
<!-- Spring 的 本 重文 件 ， 这 里 主要 配置 和 业务 逻辑 有 关 的 --> 
<!—=— = 数据 源 ， 事 务 控制 ，xxx = 


<context :property-placeholder location="classpat 


====--> 


config.properties" /> 
<bean id="dataSource" 
class="com.mchange.v2.c3p0.ComboPooledDataSource"> 
<property name="jdbcUrl" value="${jdbc.jdbcUrl}"></property> 
<property name="driverClass" 
value="${jdbc.driverClass}"></property> 
<property name="user" value="${jdbc.user}"></property> 
<property name="password" value="${jdbc.password}"></property> 
</bean> 
<!-- 配置 SqlSessionFactoryBean 一 -> 
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> 
<property name="dataSource" ref="dataSource" /> 
</bean> 
<!-- 配置 MapperScannerConfigurer,Dao 接口 所 在 包 名 ， Spring 会 自动 查找 其 下 的 类 --> 
<bean class="org.mybatis.spring.mapper.MapperSscannerConfigurer"> 
<property name="basePackage" value="com.my.dao" /> 
<property name="sqlSessionFactoryBeanName" 
value="sqlSessionFactory"></property> 
</bean> 
<!-- 配置 DataSsourceTransactionManager (事务 管理 ) = 
<bean id="transactionManager" 
class="org.springframework.jdbc.datasource.DataSourceTransactionManager"> 
<property name="dataSource" ref="dataSource" /> 
</bean> 
<!-- 启用 基于 注解 的 声明 式 事务 管理 配置 --> 
<tx:annotation-driven transaction-manager="transactionManager" /> 
</beans> 


在 Spring 配置 文件 applicationContext.xml 中 ， 首 先 需 要 启动 对 带 有 @Component、 
@Repository 和 @Service 这 些 注解 的 类 的 自动 扫描 功能 ， 但 对 包括 @Controller 注解 的 控制 
器 类 则 不 进行 扫描 。 为 了 实现 这 一 目的 ， 可 以 结合 使 用 <context:component-scan> 元 素 和 
<context:exclude-filter> 子 元 素 。 

此 外 ， 还 需要 配置 数据 源 ComboPooledDataSource 的 实例 dataSource， 数 据 库 的 连接 信 
息 定义 在 src/main/resources 目录 下 的 属性 文件 dbconfig.properties 中 ,然后 再 通过 dataSource 
配置 SqlSessionFactoryBean 实例 sqlSessionFactory， 接 着 再 通过 sqlSessionFactory 进一步 配 
置 MapperScannerConfigurer 实例 。MapperScannerConfigurer 是 Spring 和 MyBatis 整合 的 
mybatis-spring.jar 包 中 提供 的 一 个 类 ， 它 将 扫描 basePackage 指定 的 包 下 的 所 有 接口 类 (包括 
子 类 )， 然 后 创建 各 自 接口 的 动态 代理 类 ， 并 将 它们 动态 定义 为 一 个 个 Spring Bean。 之 后 使 
用 basePackage 所 指定 的 包 下 的 接口 时 ， 可 以 直接 通过 Spring 注入 相应 的 Spring Bean， 然 
后 就 可 以 直接 使 用 了 。 因 此 ， 配 置 MapperScannerConfigurer 是 实现 Spring 与 MyBatis 整合 
的 关键 。 
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为 了 能 让 Spring 框架 进行 事务 管理 ， 需 要 配置 DataSourceTransactionManager， 它 是 
Spring 在 JDBC 中 提供 的 一 个 事务 管理 组 件 。 

使 用 事务 管理 的 功能 ， 与 创建 Bean 一 样 ， 可 以 采用 注解 和 XML 配置 两 种 方式 。 如 果 
采用 注解 方式 ， 则 需要 使 用 <tx:annotation-driven> 元 素来 开启 事务 注解 标记 @Transactional。 
这 样 ， 当 调用 带 有 @Transactional 注解 的 方法 时 ， 会 将 事务 管理 功能 切入 进去 。 

至 此 ，Spring、Spring MVC 与 MyBatis 整合 的 配置 文件 就 全 部 编写 好 了 。 在 接 下 来 的 
小 节 中 ， 将 按照 实体 类 创建 、Dao 层 开发 、Service 层 开发 和 表示 层 开发 的 流程 具体 讲解 用 
户 登录 功能 的 实现 过 程 。 


17.3 ”创建 实体 类 


在 src/main/java 目录 下 ， 新 建 一 个 com.my.pojo 包 。 在 包 中 新 建 一 个 实体 类 UserInfo， 
编写 如 下 代码 : 


Package com.my.pojo; 
public class UserInfo { 
private int id; 
Private String userName; 
private String password; 
// 此 处 省 略 上 述 属性 的 get 和 set 方法 
} 


为 了 简单 起 见 ，UserInfo 类 只 添加 了 三 个 与 数据 表 user_info 的 字段 对 应 的 属性 。 


17.4 数据 访问 层 开 发 


在 src/main/java 目录 中 ， 新 建 一 个 com.my.dao 包 ， 用 于 存放 数据 访问 层 接口 。 在 包 中 
新 建 一 个 接口 UserInfoDao， 在 接口 中 声明 方法 ， 代 码 如 下 : 


Package com.my.dao; 
import org.apache.ibatis.annotations.Param; 
import org.apache.ibatis.annotations.Select; 
import com.my.pojo.UserInfo; 
public interface UserInfoDao { 
// 根据 用 户 名 和 密码 查询 
@Select ("select * from user infowhere userName =#{userName} and password 
= #{password}") 
public UserInfo findUserIinfoByCond (@Param("userName") String userName, 
@Param("password") String password); 


} 


在 接口 UserInfoDao 中 ， 声 明了 一 个 findUserInfoByCond 方法 ， 并 通过 @Select 注解 映 
射 了 一 个 根据 用 户 名 和 密码 查询 的 select 语句 。 
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17.5 业务 逻辑 层 开 发 


在 src/main/java 目录 中 ， 新建 一 个 com.my.service 包 ， 用 于 存放 业务 轴 辑 层 接口 。 在 包 
中 新 建 一 个 接口 UserInfoService， 在 接口 中 声明 一 个 login 方法 ， 用 于 登录 验证 ,代码 如 下 : 


Package com.my.service; 
import com.my.pojo.UserIinfo; 
public interface UserInfoService { 
public UserInfo login(String userName, String password); 


} 


新 建 UserInfoService 接口 的 实现 类 UserInfoServiceImpl, 存放 在 com.my.service.impl 包 
中 ， 以 实现 login 方法 。 


Package com.my.service.impl; 
import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.stereotype.Service; 
import com.my.dao.UserIinfoDao; 
import com.my.pojo.UserIinfo; 
import com.my.service.UserIinfoService; 
Q@Service ("userIinfoService") 
public class UserIinfoServiceImpl implements UserInfoService { 
@Autowired 
Private UserInfoDao userInfoDao; 
override 
public UserInfo login (String userName, String password) { 
return UserInfoDao.findUserInfoBYCond (userName, password); 


} 


在 这 个 实现 类 中 ， 首 先 使 用 @Service 注解 标注 UserInfoServiceImpl 类 ， 将 这 个 类 自动 
注册 到 Spring 容器 ， 这 样 就 无 需 在 Spring 配置 文件 中 定义 Bean 了 ; 然后 使 用 @Autowired 
注解 标注 UserInfoDao 类 型 的 属性 userInfoDao， 完 成 自动 装配 的 工作 。 


17.6 ”控制 器 开发 


在 src/main/java 目录 中 ， 创 建 包 com.my.controller， 用 于 存放 控制 器 类 。 在 包 中 新 建 一 
个 类 UserInfoController， 编 写 如 下 代码 : 


Package com.my.controller; 

import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.stereotype.Controller; 

import org.springframework.web.bind.annotation.RequestMapping; 
import com.my.pojo.UserIinfo; 

import com.my.service.UserIinfoService; 

@Controller 
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@RequestMapping ("/userinfo") 
public class UserIinfoController { 
@Autowired 
Private UserInfoService userIinfoSservice; 
@RequestMapping ("/login") 
public String login (UserInfo ui) { 
UserInfo tempUi = userIinfosService.login(ui.getUserName(), 
ui.getPassword()); 
if (tempUi != null && tempUi.getUserName() != null) { 
return "index"; 
} else { 
return "redirect:/login.jsp"; 


} 


} 


在 这 个 控制 器 类 中 ， 使 用 @Controller 和 @RequestMapping 标注 UserInfoController 类 ， 
使 用 @Controller 注解 标记 一 个 类 Controller， 使 用 @RequestMapping 注解 定义 URL 请 求 和 
Controller 方法 之 间 的 映射 ， 这 样 的 Controller 就 能 被 外 部 访问 到 了 。 


17.7 ”表示 层 开发 


在 src/main/webapp 目录 下 ， 新 建 一 个 登录 页 login.jsp， 表 单 部 分 代码 如 下 : 


<form action="userinfo/login" method="post"> 
<table> 
<tr> 
<td> 用 户 名 : </td> 
<td><input type="text" name="userName" /></td> 
</tr> 
<tr> 
<td> 密 码 : </td> 
<td><input type="text" name="password" /></td> 
</tr> 
< 
<td><input type="submit" value=" 登 录 " /></td> 
<td></td> 
CHELS 
</table> 
</form> 


再 新 建 一 个 登录 成 功 后 跳 转 到 的 首页 面 mdexjsp， 代 码 如 下 : 
<body> 
欢迎 您 ， 登 录 成 功 ! 
</body> 
在 包 资 源 管理 器 中 右 击 项 目 名 ,出现 快捷 菜单 ， 依 次 选择 Run As、Run on Server 命令 ， 
打开 Run on Server 对 话 框 。 选 择 Tomcat v9.0 Server 作为 Web 服务 器 ， 单 击 Finish 按钮 。 
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部 署 项 目 并 启动 Web 服务 器 后 ， 打 开 一 个 浏览 器 ， 在 地 址 栏 中 输入 
http://localhost:8080/ssm/login.jsp 地 址 ， 会 显示 一 个 登录 页 面 ， 如 图 17-8 所 示 。 输 入 正确 的 
用 户 名 和 密码 ， 单 击 “ 登 录 ” 按 钮 ， 页 面 成 功 跳 转 到 index.jsp， 如 图 17-9 所 示 。 


固 
€ 了 GO localhost:8080/ssm/loginjsp 妆 
下 应 用 门 从 Firefox 导 入 泣 应 用 
用 户 名 : mmm 
密码 : [321321 


EE 


图 17-8 登录 页 图 17-9 indexjsp 页 
如 果 用 户 名 或 密码 输入 错误 ， 则 重 定 向 到 登录 页 。 


17.8 小 结 


本 章 首 先 讲 解 了 Spring、Spring MVC 与 MyBatis 框架 整合 的 环境 搭建 ， 以 及 相关 配置 
文件 的 编写 ， 然 后 针对 数据 表 user_info， 以 用 户 登 录 为 例 ， 遵 循 三 层 架 构 ， 按 照 实体 类 创 
建 、 数 据 访 问 层 开发 、 业 务 逻辑 层 开 发 、 控 制 器 开发 和 表示 层 开发 的 流程 ， 完 整地 描述 了 
一 个 功能 模块 的 实现 过 程 。 
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jQuery 是 JavaScript 的 一 个 基础 框架 ， 考 虑 到 框架 的 通用 性 和 代码 文件 大 小 ,jQuery 仅 
仅 集成 了 JavaScript 中 最 为 核心 和 常用 的 功能 。 目 前 ， 在 jQuery 的 基础 上 已 开发 出 众多 的 
插件 ， 这 些 插件 均 以 jQuery 为 核心 编写 而 成 。 本 章 主要 介绍 jQuery Easy UI、Bootstrap 和 
Vue 三 种 当前 流行 的 框架 。 


18.1 Easy UI 框架 


Easy UI 是 在 jQuery 的 基础 上 开发 的 一 个 UI 插件 , 目的 在 于 让 Web 开发 者 快捷 地 构建 
出 功能 丰富 且 美 观 的 用 户 界面 。 开 发 者 无 需 编写 复杂 的 JavaSeript， 也 无 需 对 CSS 样式 有 深 
入 的 了 解 。 开 发 者 只 需 有 一 些 HTML 和 jQuery 基础 , 就 可 以 轻松 地 开发 出 较 好 的 软件 
Easy UI 的 信人 由 于 篇 幅 所 限 ， rr ete 中 的 项 目 
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18.1.1 Layout 控件 


使 用 Easy UI 的 Layout 控件 可 以 实现 页 面 布局 ， 布 局 是 有 五 个 区 域 ( 北 区 north、 南 区 
south、 东 区 east、 西 区 west 和 中 区 center) 的 容器 。 中 间 的 区 域 面板 是 必需 的 ， 边 缘 的 区 域 
面板 是 可 选 的 。 每 个 边缘 区 域 面板 可 通过 拖 忠 边框 调整 尺寸 ， 也 可 以 通过 点 击 折 车 触发 器 
来 折 炙 面板 。 布 局 可 以 嵌 套 ， 因 此 用 户 可 建立 复杂 的 布局 。 

使 用 Layout 控件 实现 一 个 简单 布局 的 过 程 如 下 : 

(1) 创建 Web 项 目 easyui_demo， 将 Easy UI 所 需 的 文件 事先 存放 到 文件 夹 EasyUI 中 ， 
再 将 该 文件 夹 拷贝 到 项 目的 WebRoot 目录 下 ，EasyUI 文件 夹 的 内 容 如 图 18-1 所 示 。 

(2) 新 建 页 面 layoutjsp， 在 页 面 的 <head></head> 元 素 中 引用 相关 的 css 和 js 文件 ， 代 
码 如 下 : 


<head> 


<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" 
type="text/css" /> 

<link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 

<link href="EasyUI/demo.css" rel="stylesheet" type="text/css" /> 

<script src="EasyUI/jquery.min.js" type="text/javascript"></script> 

<script src="EasyUI/jquery.easyui.min.js" 

type="text/javascript"></script> 

<script src="EasyUI/easyui-lang-zh CN.js" 

type="text/javascript"></script> 

</head> 


(3) 在 页 面 layoutjsp 的 <body></body> 元 素 中 添加 如 下 代码 : 


<body> 
<div class="easyui-layout" style="width:700px;height:350px;"> 
<div data-options="region: 'north'" style="height:50px"> 这 是 北 区 
north</div> 
<div data-options="region:'south',split:true" 
style="height:50px;"> 这 是 南 区 south</div> 
<div data-options="region:'east',split:true" title="East" 
style="width:100px; "> 这 是 东区 east</div> 
<div data-options="region:'west',split:true" title="West" 
style="width:100px; "> 这 是 西区 west</div> 
<div 
data-options="region:'center',title:'Main 
Titlen: iconCis: "con-0OF" "> 
这 是 中 区 center</div> 
</div> 
</body> 


(4) 部 署 项 目 并 启动 Tomcat， 在 浏览 器 中 浏览 页 面 layoutjsp， 效 果 如 图 18-2 所 示 。 


< EE 
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4 EE EasyUI 
4 EE themes J 国 apynocahosrecsojeas x | + 


» EE black 站 JET oan @ “|- 
b EE bootstrap es 
» BE default ee 
”名 gray Te i 
b Ee icons es Scenter a 
» EB material 
b 人 E metro 

加 colorcss 
回 iconcss 
回 mobilecss 

回 democss 
easyui-lang-zh_ CNjs EE 
jqueryeasyuiminjs 
jquery.minjs 


图 18-1 Easy UI 所 需 的 文件 图 18-2 Layout 控件 效果 


18.1.2 Tabs 控件 


使 用 Tabs 控件 可 以 实现 选项 卡 布局 ， 一 般 用 于 中 部 选项 卡 。 在 项 目 easyui_demo 中 创 
建 页 面 tabs.jsp， 在 页 面 的 <head></head> 标 签 中 引用 相关 的 css 和 js 文件 。 
在 页 面 tabs.jsp 的 <body></body> 标 签 中 编写 如 下 代码 : 


<body> 
<div class="easyui-tabs" style="width:700px;height:250px"> 
<div title=" 选 项 卡 1” style="padding:10px"> 
页 面 1 
</div> 
<div title=" 选 项 卡 2" style="padding:10px"> 
页 面 1 
</div> 
<div title=" 选 项 卡 3" 
data-options="iconCls:'icon-help',closable:true" 
style="padding:10px"> 页 面 3</div> 
</div> 
</body> 


在 浏览 器 中 浏览 页 面 tabsjsp， 效 果 如 图 18-3 所 示 。 


18-3 ”Tabs 控件 效果 
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18.1.3 Tree 控件 


Tree 控件 可 以 将 数据 分 层 以 树 形 结构 在 web 页 面 显示 ，Tree 控件 在 页 面 上 以 <ul></ul> 
标签 标识 。 在 项 目 easyui_demo 中 创建 页 面 treejsp， 在 页 面 的 <head></head> 标 签 中 引用 相 


关 的 css 和 js 文件 。 
在 页 面 treejsp 的 <body></body> 标 签 中 编写 如 下 代码 : 
<body> 


<!-- 定义 ul --> 

<ul id="tt"></ul> 

<script type="text/javascript"> 
// 为 Tree 控件 指定 数据 源 
$('#tt') .tree({ 

url : 'tree data.json' 

Ds; 

</script> 

</body> 


在 项 目的 WebRoot 目录 下 创建 一 个 JSON 格式 的 文件 ree_datajson， 作 为 Tree 控件 的 
数据 源 ， 代 码 如 下 : 
[ 


时 
"text": "订餐 系统 管理 后 台 "， 
a 
"children™: 上 
{ 
ae 
"text": "和 餐 品 管理 "， 
bg 
"children": [ 
{ 
vids 3 
"text": "和 餐 品 列表 "， 
te 
}, 
{ 
wid ds 
"text": "和 餐 品 类 型 列表 "， 
上 人 
} 
] 
和 
人 和 全 全- :于 芭 家 
"text": "退出 系统 "， 
Ee 


] 
在 浏览 器 中 浏览 页 面 treejsp， 
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效果 如 图 18-4 所 示 。 


4 呈 订 图 系统 管理 后 台 


18.1.4 ”DataGrid 控件 


4 铝 考 品 管理 

国 餐 品 列表 

国 餐 品 类 型 列表 
国 退出 系统 


18-4 Tree 控件 效果 


DataGrid 控件 以 表格 格式 显示 数据 ， 并 为 选择 、 排 序 、 分 组 和 编辑 数据 提供 了 丰富 的 
支持 。 数 据 网 格 (DataGrid) 的 设计 目的 是 为 了 减少 开发 时 间 ， 且 不 要 求 开发 人 员 具 备 指定 的 
知识 。 它 是 轻 量 级 的 ， 但 是 功能 丰富 。 它 的 特性 包括 单元 格 合并 、 多 列 页 眉 、 冻 结 列 和 页 


脚 等 。 

在 项 目 easyui_demo 中 创建 页 面 datagridjsp， 在 页 面 的 <head></head> 标 签 中 引用 相关 
的 css 和 js 文件 。 

在 页 面 datagrid.jsp 的 <body></body> 标 签 中 编写 如 下 代码 : 

<body> 


<table id="newsinfoDg" class="easyui-datagrid"></table> 
<script type="text/javascript"> 
$(function() { 
$('#newsinfoDg') .datagrid({ 


singleSelect : 


fit : true, 
fitColumn : true, 
rownumbers : true, 


false, 


url : 'datagrid data.txt', 

columns : [ [I{ 
在 和 EY 8 
field : 'productid', 
align : 'center', 
checkbox : true 

和 
field 2 natecostey 
title : 'unitcost', 
width : 50 

2 
field : "status', 
title : 'status', 
width : 60 

]，1{ 
field 5 listprice"y 
te 3 "ietpricers 
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width : 50 

$V 
ied 3 wattxrl”, 
ts at 


width : 200 
所 


field : 'itemid’', 
titblie 3 “itemilo"s 
width : 100 
| 
nD; 
]) 
</script> 
</body> 
在 项 目的 WebRoot 目录 下 创建 文件 datagrid_data.txt， 作 为 DataGrid 控件 的 数据 源 ， 代 


码 如 下 : 


[{"productid":"FI-SW-01", "unitcost":10.00,"status" 
"listprice":36.50, "attrl":"Large", "itemid":"EST-1"}, 

t"“productid™”: "KE9-DL-01", "uNnitcost":12.007: "estatus"s™"Pp™: 
"listprice":18.50,"attrl":"Spotted Adult Female","itemid":"EST-10"}, 


// 由 于 篇 幅 ， 此 处 省 略 了 其 他 数据 
在 浏览 器 中 浏览 页 面 datagridjsp， 效 果 如 图 18-5 所 示 。 


Pny 


国 htpWiocalhost8o8oeas X 
€) 加 locahosta08o/easyui demo/datagridjsp CC 
unitcos status listprice attrl 
p 36.5 Lage 

18.5 Spotted Adult Female 
28.5 Venomless 
26.5 Rattieless 
35.5 Green Adult 
158.5 Talless 
83.5 With tail 
63.5 Adult Female 
89.5 Adult Male 


口 
口 
口 
口 
| 
口 
口 
口 
口 
口 
口 


63.5 ”Adulc Male 


18-5 _ DataGrid 控件 效果 


18.2 ”Bootstrap 框架 


Bootstrap 是 美国 Twitter 公司 的 设计 师 Mark Otto 和 Jacob Thornton 合作 基于 HTML、 
CSS、JavaScript 开发 的 简洁 、 直 观 、 强 悍 的 前 端 开发 框架 ， 使 得 Web 开发 更 加 快捷 。 


18.2.1 ”Bootstrap 简介 


Bootstrap 是 一 个 用 于 快速 开发 Web 应 用 程序 和 网 站 的 前 端 框架 ， 基 于 HIML、CSS、 
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JavaScript。Bootstrap 中 包含 丰富 的 Web 组 件 ， 根 据 这 些 组 件 ， 可 以 快速 地 搭建 一 个 漂亮 、 
功能 完备 的 网 站 。Bootstrap 包括 下 拉 菜 单 、 按 钮 组 、 按 钮 下 拉 菜 单 、 导 航 、 导 航 条 、 路 径 
导航 、 分 页 、 排 版 、 缩 略图 、 警 告 对 话 框 、 进 度 条 、 媒 体 对象 等 组 件 。 


18.2.2 ”环境 安装 


可 以 从 http://getbootstrap.com/ 上 下 载 Bootstrap 的 最 新 版 本 ， 为 了 更 好 地 了 解 和 更 方便 
地 使 用 ， 本 书 中 下 载 Bootstrap 的 预 编译 版 本 bootstrap-3.3.7-distzip。 解 压缩 这 个 压缩 文件 ， 
里 面包 含 css 和 js 两 个 文件 夹 。 其 中 ，css 文件 夹 中 主要 包含 *.css 文件 ， 这 里 选择 使 用 
bootstrap.min.css 文件 ， 这 是 Bootstrap 的 基本 样式 ;js 文件 夹 中 包含 *.js 文件 ， 这 里 选择 使 
用 bootstrap.min.js 文件 ， 这 是 Bootstrap 的 jQuery 插件 源 文件 。 

在 HBuilder 编辑 器 中 ， 新 建 一 个 名 为 BootstrapTest 的 Web 项 目 ， 将 bootstrap.min.css 
文件 添加 到 该 项 目的 css 目录 中 ， 将 bootstrap.min.js 文件 添加 到 js 目录 中 。 

打开 项 目 默认 页 index.html， 在 页 面 中 使 用 Bootstrap 框架 ， 代 码 如 下 : 


<1!DOCTYPE html> 
<html> 
<head> 
<!-- 引入 Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- 引入 jQuery --> 
<script type="text/javascript" 
src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<meta charset="utf-8" /> 
<title></title> 
</head> 
<body> 
<hl>Hello, world!</h1l> 
</body> 
</html> 


在 页 面 的 <head></head> 部 分 ， 依 次 引入 bootstrap.min.css 、jquery-3.3.1.min.js 和 


bootstrap.min.js。jquery-3.3.1.min.js 是 jQuery 库 的 基础 文件 ， 这 个 文件 也 需要 添加 到 项 目的 
js 目录 中 。 浏 览 页 面 index.html， 输 出 Hello, world!。 


18.2.3 ”Bootstrap 按钮 


在 项 目 BootstrapTest 中 ， 新 建 一 个 页 面 button.html， 用 于 实现 Bootstrap 的 按钮 效果 ， 
代码 如 下 : 


<!1DOCTYPE html> 
<html> 
<head> 
<!-- 引入 Bootstrap --> 
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<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- 引入 jQuery --> 
<script type="text/javascript" 
src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<!-- 标准 的 按钮 --> 
<button type="button" class="btn btn-default"> 默 认 按 钮 </button> 
<!-- 提供 额外 的 视觉 效果 ， 标 识 一 组 按钮 中 的 原始 动作 --> 
<button type="button" class="btn btn-primary"> 原 始 按钮 </button> 
<br><br> 
<!-- 表示 一 个 成 功 的 或 积极 的 动作 --> 
<button type="button" class="btn btn-success btn-sm"> 成 功 按钮 
</button> 
<!-- 信息 警告 消息 的 上 下 文 按钮 --> 
<button type="button" class="btn btn-info btn-1g"> 信 息 按钮 </button> 
<br><br> 
<!-- 表示 应 谨慎 采取 的 动作 --> 
<button type="button" class="btn btn-warning disabled"> 警 告 按钮 
</button> 
<!-- 表示 一 个 危险 的 或 潜在 的 负面 动作 --> 
<button type="button"” class="btn btn-danger"> 危 险 按钮 </button> 
</body> 
</html> 


在 页 面 button.html 中 ， 定 义 六 个 <button> 按 钮 。 任 何 带 有 class .btn<button> 的 元 素 都 会 
继承 圆 角 灰色 按钮 的 默认 外 观 。 此 外 ，Bootstrap 提供 了 一 些 选项 来 定义 按钮 的 样式 ， 比 如 ， 
btn-default 表示 默认 或 标准 按钮 ，btn-primary 表示 原始 按钮 样式 (未 被 操作 )，btn-success 表 
示 成 功 的 动作 ，btn-info 表示 需要 弹出 信息 的 按钮 ，btn-waming 表示 需要 谨慎 操作 的 按钮 ， 
btn-danger 表示 一 个 危险 动作 的 按钮 操作 ，btn-sm 表示 制作 一 个 小 按钮 ，btn-lg 表示 制作 一 
个 大 按钮 ，disabled 表示 禁用 按钮 。 

浏览 页 面 button.html， 效 果 如 图 18-6 所 示 。 


[DD 127.0.0.1:8020/Bootst x NW 
GG [© 127.0.0.1:8020/BootstrapTest/button.html? 全 
让 应 用 从 Firefox 导入 洪 应 用 党 百度 一 下 , 你 就 知道 。 > 其 他 书签 


ws EY 


18-6 ”Bootstrap 按钮 
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18.2.4 ”Bootstrap 表格 


在 项 目 BootstrapTest 中 ,新 建 一 个 页 面 table.html， 用 于 实现 Bootstrap 的 表格 效果 ， 代 


码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<!-- 引入 Bootstrap --> 


<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-— 引入 jQuery 一 -> 
<script type="text/javascript" 
src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<div class="table-responsive"> 
<table class="table table-hover"> 
<caption> 响 应 式 表 格 布局 </caption> 
<thead> 
<tr> 
<th> 产 品 </th> 
<th> 付 款 日 期 </th> 
<th> 状 态 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 产 品 1</td> 
<td>23/11/2013</td> 
<td> 待 发 货 </tad> 
AEES 
<tr> 
<td> 产 品 2</tq> 
<td>10/11/2013</td> 
<td> 发 货 中 </td> 
</tr> 
<tr> 
<td> 产 品 3</td> 
<td>20/10/2013</td> 
<td> 待 确认 </td> 
</tr> 
<tr> 
<td> 产 品 4</td> 
<td>20/10/2013</td> 
<td> 已 退货 </td> 
</tr> 


Spring + Spring MVC + MyBatis 


框架 技术 精 讲 与 整合 案例 


</tbody> 
</table> 
</div> 
</body> 

</html> 

在 页 面 table.html 中 ，.table 类 为 任意 <table> 添 加 基本 样式 (只 有 横向 分 隔 线 )。 除 了 基 
本 的 表格 标记 和 .table class, 还 有 一 些 可 以 用 来 为 标记 定义 样式 的 类 。 例 如 , 添加 .table-striped 
class， 会 在 <tbody> 内 的 行 上 出 现 条 纹 ; 添加 .table-bordered class， 会 看 到 每 个 元 素 周围 都 有 
边框 ， 且 整个 表格 是 圆 角 的 ， 通 过 添加 .table-hover class， 当 指针 悬 停 在 行 上 时 会 出 现 浅 灰 
色 背 景 ; 通过 添加 .table-condensed class， 行 内 边 距 (padding) 被 切 为 两 半 ， 以 便 让 表 看 起 来 更 
紧凑 ; 通过 把 任意 的 .table 包 在 .table-responsive class 内 ， 可 以 让 表格 水 平 滚动 以 适应 小 型 
设备 (小 于 768px)。 当 在 大 于 768px 宽 的 大 型 设备 上 查看 时 ， 将 看 不 到 任何 差别 。 

运行 页 面 table.html， 效 果 如 图 18-7 所 示 。 


D12700 rs000/8oct x 
© [© 12700.1.8020/Boo0tstrapTesViable ht 


图 18-7 Bootstrap 表格 


18.2.5 ”Bootstrap 网 格 系统 


Bootstrap 提供 了 一 套 响 应 式 、 移 动 设备 优先 的 流 式 网 格 系统 ， 随 着 屏幕 或 视 口 尺寸 的 
增加 ， 系 统 会 自动 分 为 最 多 12 列 。 

在 项 目 BootstrapTest 中 ， 新 建 一 个 页 面 grid.html， 用 于 实现 Bootstrap 的 网 格 结构 ， 代 
码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<!-- 引入 Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- 引入 jQuery --> 
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<div class="container"> 
<div class="row"> 
<div class="col-sm-3 col-md-6 col-lg-8" style="background-color: 
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box-shadow: inset lpx -lpx lpx #444, 
inset -lpx lpx lpx #444;"> 
<p>Mr. Johnson had never been up in an aerophane before 
and he had read a lot about air accidents, so one day when a friend offered 
to take him for a ride in his own small phane, Mr. Johnson was very worried 
about accepting. Finally, however, his friend persuaded him that it was very 
safe, and Mr. Johnson boarded the plane. 
</p> 
<p>His friend started the engine and began to taxi onto 
the runway of the airport. Mr. Johnson had heard that the most dangerous part 
of a flight were the take-off and the landing, so he was extremely frightened 
and closed his eyes. 
</p> 
</div> 
<div class="col-sm-9 col-md-6 col-lg-4" 
style="background-color: #dedef8; 
box-shadow: inset lpx -lpx lpx #444, 
inset -lpx lpx lpx #444;"> 
<p>After a minute or two he opened them again, looked out 
of the window of the plane, and said to his friend, "Look at those people 
down there. They look as small as ants, don't they?" 
</p> 
<p> "Those are ants," answered his friend. "We're still 
on the ground." 
</p> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 页 面 grid.html 中 ， 提 供 了 3 种 不 同 的 列 布局 ， 分 别 适用 于 三 种 设备 。 在 手机 上 ， 它 
将 是 左边 25%、 右 边 75% 的 布局 ， 在 平板 电脑 上 ， 它 将 是 50%、50% 的 布局 ， 在 大 型 视 口 
的 设备 上 ， 它 将 是 33%、66% 的 布局 。 

浏览 页 面 grid.html， 如 果 将 页 面 调整 到 手机 尺寸 ， 效 果 如 图 18-8 所 示 ; 如 果 将 页 面 调 
整 到 平板 电脑 尺寸 ， 效 果 如 图 18-9 所 示 ; 如 果 将 页 面 调整 到 大 型 视 口 的 设备 尺寸 ， 效 果 如 
图 18-10 所 示 。 


iphone6 9 375 x 667 86%v © 


ipadpro 1024 x 1366 42% © 


18-8 手机 尺寸 下 网 格 效果 
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Laptopwith.. 1440 x 900 45%v 


18-10 ”大 型 视 口 设备 尺寸 下 网 格 效果 


18.2.6 ”Bootstrap 下 拉 菜 单 


Bootstrap 提供 的 下 拉 菜 单 是 可 切换 的 ， 可 以 向 任何 组 件 (如 导航 栏 、 标 签 页 、 按 钮 等 ) 
添加 下 拉 列 表 。 如 需 使 用 下 拉 菜 单 ， 只 需要 在 class.dropdown 内 加 上 下 拉 菜 单 即 可 。 
在 项 目 BootstrapTest 中 ， 新 建 一 个 页 面 dropdowns.html， 用 于 实现 Bootstrap 的 下 拉 菜 


单 ， 代 码 如 下 : 
<!DOCTYPE html> 
<html> 
<head> 
<!-- 引入 Bootstrap --> 


<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- 引入 jQuery --> 
<script type="text/javascript" 
src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
.dropdown-menu li a { 
padding: 3px 20px; 
font-weight: normal; 
line-height: 1.42857; 
color: #000000; 
3 
</style> 
</head> 
<body> 
<div class="container" style="margin-top:20px"> 
<div class="dropdown"> 
<button class="btn dropdown-toggle" id="mydropdownmenu" 
data-toggle="dropdown"> 下 拉 菜 单 </button> 
<ul class="dropdown-menu"> 
x 
<a href="#"> 社 区 </a> 
</1i> 
<1i> 
<a href="#"> 服 务 </a> 


< Sa a 


第 18 章 前 端 UI 框架 


</1i> 
Rl> 

<a href="#"> 俱 乐 部 </a> 
</1i> 
<li class="divider"></1i> 
<!-- 分 割 线 divider--> 
<1i> 

<a href="#"> 交 友 </a> 
/li 
<li class="dropdown-header"> 友 情 链接 </1i> 
<!-- 标 题 dropdown-header--> 


二 下 是 

<a href="#"> 邮 箱 </a> 
</1i> 
<13> 

<a rhref="#"> 苏 宁 </a> 
</1i> 
<1li> 

<a href="#"> 淘 宝 </a> 
</1i> 


<li class="disabled"> 
<a href="#"> 禁 用 </a> 
</1i> 
</ul> 
</div> 
</div> 
</body> 
</html> 


下 拉 菜 单 组 件 必须 包含 在 dropdown 类 容器 中 , 该 容器 包含 下 拉 社区 
菜单 的 触发 器 (触发 元 素 ) 和 下 拉 菜 单 ， 下 拉 菜 单 必须 包含 在 服务 
dropdown-menu 容器 中 。 

在 页 面 dropdowns.html 中 ， 下 拉 菜 单 组 件 包 含 在 Re 
class="dropdown" 的 <div> 标 签 中 。 在 <div> 标 签 中 包含 下 拉 菜 单 的 触 邮箱 
发 器 和 下 拉 菜 单 。 下 拉 菜 单 的 触发 器 通过 <button> 标 签 来 实现 ， 在 


<button> 标 签 中 定义 data-toggle="dropdown" 属 性 ， 用 于 激活 下 拉 菜 | 

单 的 交互 行为 。 下 拉 菜 单 通 过 <ul> 标 签 来 实现 ， 在 <ul> 标 签 中 定义 

class="dropdown-menu" 属 性 ， 用 于 设置 下 拉 菜 单 的 样式 。 18-11 Bootstrap 
浏览 页 面 dropdowns html， 单 击 下 拉 菜 单 按钮 ， 效 果 如 图 18-11 下 拉 荣 音 

所 示 。 


18.2.7 ”Bootstrap 面板 


Bootstrap 提供 的 面板 组 件 Panels 用 于 把 DOM 组 件 插入 到 一 个 盒子 中 ， 在 项 目 
BootstrapTest 中 ， 新 建 一 个 页 面 panels.html， 用 于 实现 Bootstrap 面板 ， 代 码 如 下 : 
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<!1DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8" /> 
<title></title> 
<!-- 引入 Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- 引入 jQuery --> 
<script type="text/javascript" 


src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
</head> 
<body> 
<div class="panel panel-default"> 
<div class="panel-body"> 
这 是 一 个 基本 的 面板 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
不 带 title 的 面板 标题 
</div> 
<div class="panel-body"> 
面板 内 容 
</div> 
</div> 
<div class="panel panel-default"> 
<div class="panel-heading"> 
<h3 class="panel-title"> 
带 有 title 的 面板 标题 
</h3> 
</div> 
<div class="panel-body"> 
面板 内 容 
</div> 
</div> 
</body> 
</html> 


创建 一 个 基本 的 面板 ， 只 需要 向 <div> 元 素 添加 class .panel 和 class .panel-default 即 可 。 
也 可 以 通过 以 下 两 种 方式 来 添加 面板 标题 。 

@ ”使 用 .panel-heading class 可 以 很 简单 地 向 面板 添加 标题 容器 。 

@ ”使 用 带 有 .panel-title class 的 <h1> 一 <h6> 来 添加 预定 义 样式 的 标题 。 

浏览 页 面 panels.html， 效 果 如 图 18-12 所 示 。 
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© | © 127.0.0.1:3020/BootstrapTest/panelsntmJ?_hbt=1531464 全 DO 


这 是 一 个 要 地 和 耐克 


图 18-12 Bootstrap 面板 
18.2.8 ”Bootstrap 模 态 框 


模 态 框 (Modal) 是 覆盖 在 父 窗 体 上 的 子 窗 体 ， 用 来 显示 来 自 一 个 单独 的 源 的 内 容 ， 可 以 
在 不 离开 父 窗 体 的 情况 下 有 一 些 互动 ， 子 窗 体 可 提供 信息 、 交 互 等 。 

在 项 目 BootstrapTest 中 ， 新 建 一 个 页 面 modal.html， 用 于 实现 Bootstrap 的 模 态 框 ， 代 
码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<!-- 引入 Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- 引入 jQuery --> 
<script type="text/javascript" 
src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<meta charset="utf-8" /> 
<title></title> 
</head> 
<body> 
<!-- 按钮 触发 模 态 框 --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" 
data-targe #myModal"> 去 登录 . . .</button> 
<! 模 态 框 Modal --> 
<div class="modal fade" id="myModal" tabindex= 
aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" 
data-dismiss="modal" aria-hidden="true">x</button> 
<h4 class="modal-title" id="myModalLabel"> 


" role="dialog" 


登录 窗口 </h4> 


</div> 


<div class="modal-body"> 用 户 名 </div><br> 
<div class="modal-body"> 密 码 </div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-default" 


data-dismiss="modal"> 关 闭 </button> 
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<button type="button" class="btn btn-primary"> 


登录 </button> 
</div> 
</div> 
<!-- /.modal-content --> 
</div> 
<!-- /.modal-dialog --> 
</div> 
<l== Hmodal -== 
<script> 


$ (function() { 
$('#myModal') .modal ('hide') 
本 
<script> 
$(function() { 
$('#myModal') .on('hide.bs.modal', 
function() { 
alert (' 你 关闭 了 模 态 框 登录 窗口 . . . ') ; 
}) 
]) 7 
</script> 
</body> 

</html> 

在 页 面 modal.html 中 ， 定 义 了 一 个 id 为 myModal 的 <div> 标 签 。 在 这 个 <div> 标 签 中 定 
义 class="modal fade" 属 性 ， 用 来 把 <div> 的 内 容 识别 为 模 态 框 ， 同 时 当 模 态 框 被 切换 时 ， 它 
会 引起 内 容 淡 入 淡出 ; 定义 aria-labelledby="myModalLabel" 属 性 ， 用 来 引用 模 态 框 的 标题 ; 
定义 aria-hidden="true" 属 性 ， 用 于 保持 模 态 窗口 不 可 见 ， 直 到 触发 器 被 触发 为 止 ， 定义 
role="dialog"， 用 于 指定 模 态 框 为 对 话 框 。 

在 模 态 框 内 , 定义 class="modal-dialog" 属 性 , 用 于 窗口 声明 ; 定义 class="modal-content" 
属性 ， 用 于 内 容声 明 ; 定义 class="modal-header" 属 性 ， 用 于 为 模 态 窗口 的 标题 设置 样式 ; 
定义 class="modal-body" 属 性 ， 用 于 为 模 态 窗口 的 主体 设置 样式 ， 定 义 class="modal-footer" 
属性 ， 用 于 为 模 态 窗口 的 底部 设置 样式 。 

S$(functionO) 代 码 段 内 的 代码 用 于 隐藏 模 态 框 ,， 也 就 是 说 页 面 加 载 时 模 态 框 是 关闭 的 。 
为 了 打开 模 态 框 ， 定 义 了 一 个 名 为 “去 登录 ”的 <button> 标 签 。 在 这 个 <button> 标 签 中 定义 
data-target="#myModal" 属 性 ， 从 而 与 模 态 框 建立 绑 定 关系 。 

浏览 页 面 modal.html, 单 击 “ 去 登录 ”按钮 , 就 可 以 打开 模 态 框 了 , 效果 如 图 18-13 所 示 。 


18-13 ”打开 模 态 框 


(246BC RV 
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在 这 个 模 态 框 中 ， 定 义 了 “关闭 ”和 “登录 ”两 个 按钮 。 在 名 为 “关闭 ”的 <button> 标 
签 中 ， 定 义 data-dismiss="modal" 属 性 ， 用 于 关闭 这 个 模 态 框 。 

在 模 态 框 中 还 可 以 处 理 一 些 事件 ,例如 ， 当 模 态 框 关闭 时 会 触发 hidden.bs.modal 事件 ， 
可 以 在 回调 函数 中 处 理 这 个 事件 ， 可 以 弹出 一 个 警告 框 ， 显 示 一 些 信息 。 
在 打开 的 模 态 框 中 ， 单 击 “ 关 闭 ” 按 钮 。 此 时 ， 会 弹出 一 个 警告 框 ， 显 示 “ 你 关闭 了 
模 态 框 登录 窗口 ...” 提 示 ， 效 果 如 图 18-14 所 示 。 


127.00.1:8020 旦 示 


18-14 ”处 理 模 态 框 的 关闭 事件 


18.2.9 ”Bootstrap 标签 页 


标签 页 (Tab) 是 Bootstrap 的 一 个 插件 , 标签 页 可 用 来 显示 多 个 面板 , 且 面 板 之 间 可 以 切换 。 
在 项 目 BootstrapTest 中 ， 新 建 一 个 页 面 tab.html， 用 于 实现 Bootstrap 的 标签 页 ， 代 码 


如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<!-- 引入 Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<!-- I 入 jQuery --> 
<script type="text/javascript" 
src="js/jquery-3.3.1.min.js"></script> 
<!-- 包括 所 有 已 编译 的 插件 --> 
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<meta charset="utf-8" /> 
<title></title> 
</head> 
<body> 
<ul id="myTab" class="nav nav-tabs"> 
<li class="active"> 
<a href="#pagel" data-toggle="tab"> 
显示 面板 一 
</a> 
</11i3 
<1> 
<a href="#page2” data-toggle="tab"> 显 示 面 板 二 </a> 
</1i> 
</ul> 
<div id="myTabContent" class="tab-content"> 
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<div class="tab-pane fade in active" id="pagel"> 
<p> 标 签 页 面板 一 </p> 

</div> 

<div class="tab-pane fade" id="page2"> 
<p> 标 签 页 面板 二 </p> 

</div> 

</div> 
</body> 

</html> 

在 页 面 tab.html 中 ， 定 义 了 一 个 id 为 myTabContent 的 <div> 标 签 。 在 这 个 <div> 标 签 中 
定义 class="tab-content" 属 性 ,用 于 定义 面板 区 容器 。 在 这 个 <div> 标 签 内 , 又 定义 了 两 个 <div> 
子 标签 。 在 id 为 pagel 的 <div> 子 标签 中 ， 定 义 了 class="tab-pane fade in active" 属 性 ， 将 这 
个 <div> 子 标签 创建 成 一 个 面板 ， 并 为 标签 页 设置 淡 入 淡出 效果 ， 且 这 个 面板 是 激活 的 。 在 
id 为 page2 的 <div> 子 标签 中 ， 定 义 了 class="tab-pane fade" 属 性 ， 创 建 第 二 个 面板 ， 并 设置 
淡 入 淡出 效果 。 

为 了 能 实现 标签 页 中 面板 的 切换 ， 定 义 了 一 个 id 为 myTab 的 <ul> 标 签 ， 在 这 个 <ul> 标 
签 中 定义 class="nav nav-tabs" 属 性 ， 用 于 创建 一 个 标签 式 的 导航 菜单 。 在 <ul> 标 签 中 定义 了 
两 个 <a> 标 签 , 在 <a> 标 签 中 定义 data-toggle="tab" 属 性 , 用 于 激活 标签 页 插件 ; 通过 设置 href 
属性 值 来 指向 对 应 面板 的 id。 

浏览 页 面 tab.html， 效 果 如 图 18-15 所 示 。 此 时 ， 单 击 导航 菜单 “显示 面板 二 ”， 可 以 
切换 到 第 二 个 面板 ， 如 图 18-16 所 示 。 


口 127.0.0.1.8020/B< x 
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显示 面板 一 显示 面板 二 


标签 页 面板 二 


图 18-15 标签 页 面板 一 图 18-16 标签 页 面板 二 


18.3 ”Vue 框架 


Vuejs 是 一 套 构 建 用 户 界面 的 渐进 式 框架 ， 只 关注 视图 层 , 采用 自 底 向 上 增 量 开发 的 设 
计 ， 通 过 尽 可 能 简单 的 API 实现 相应 的 数据 绑 定 和 组 合 的 视图 组 件 。 


18.3.1 Vue 简介 
与 知名 前 端 Angular 一 样 ，Vuejjs 在 设计 上 也 使 用 了 MVVM(Model-View-View-Model) 


模式 。MVVM 模式 本 质 上 就 是 MVC 的 改进 版 ，View 绑 定 到 ViewModel， 然后 执行 一 些 命 
令 ， 再 向 它 请 求 一 个 动作 ，View 和 ViewModel 之 间 通 过 双向 绑 定 建立 联系 。ViewModel 


< ee a a a 
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跟 Model 通讯 ， 告 诉 它 更 新 来 响应 UI。 这 样 便 使 得 为 应 用 构建 UI 非常 容易 。 
18.3.2 ”第 一 个 Vue 应 用 


首先 从 Vuejs 的 官网 上 ， 直 接 下 载 vue.min.js。 然 后 在 HBuilder 编辑 器 中 ， 新 建 一 个 名 
为 VueTest 的 Web 项 目 ， 将 vue.minjs 文件 添加 到 该 项 目的 js 目录 中 。 

打开 项 目 默认 页 index.html， 在 页 面 中 使 用 <script> 标 签 引 入 vue.minjs 文件 ， 再 编写 第 
一 个 Vue 应 用 代码 ， 如 下 所 示 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<script type="text/javascript" src="js/vue.min.js"></script> 
</head> 
<body> 
<div id="app"> 
{{ message }} 
</div> 
<script> 
Var app = new Vuel({ 
el: '#app', 
data: { 
message: 'Hello Vue!' 
} 
} 
</script> 
</body> 
</html> 


在 页 面 mdex.html 中 的 <script> 部 分 ， 通 过 构造 函数 Vue 创建 了 一 个 Vue 的 根 实例 ， 并 
启动 Vue 应 用 。Vue 的 实例 名 为 app， 实 例 内 部 可 以 包含 多 个 选项 。el 选项 用 于 指定 页 面 中 
用 于 挂 载 Vue 实例 的 DOM 元 素 ， 这 里 使 用 id 为 app 的 <div> 元 素来 挂 载 Vue 实例 ; data 选 
项 用 于 定义 数据 对 象 ， 这 个 数据 对 象 中 有 一 个 属性 message， 它 的 值 为 Hello Vue!， 该 对 象 
被 加 入 到 一 个 Vue 实例 中 。 

在 id 为 app 的 <div> 元 素 中 ,使 用 双 大 括号 {{ }}， 这 是 最 基本 的 文本 插值 方法 ， 用 于 输 
出 对 象 属性 和 函数 返回 值 。 这 里 ， 双 大 括号 {{ }} 里 的 内 容 会 被 蔡 换 为 Hello Vue!。 如 果 数 据 
对 象 中 的 message 属性 值 发 生 改变 ，HTML 视图 也 会 发 生 相 应 的 变化 。 

浏览 页 面 index.html， 页 面 显 示 “Hello Vue!”， 效 果 如 图 18-17 所 示 。 


口 127.00::8020/vueTes x Ne 
C |© 127.00.1:8020/VueTest/indexchtml?.. 会 | = 让 


Hello Vue! 


18-17 ”一 个 简单 的 Vue 应 用 
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18.3.3 ”生命 周期 


每 个 Vue 实例 在 被 创建 时 都 要 经 过 一 系列 的 初始 化 过 程 ， 例 如 ， 需 要 设置 数据 监听 、 
编译 模板 、 将 实例 挂 载 到 DOM 并 在 数据 变化 时 更 新 DOM 等 。 同 时 在 这 个 过 程 中 也 会 运行 
一 些 叫 做 生命 周期 钩子 的 函数 ， 用 户 可 以 在 不 同 阶 段 添 加 自己 的 处 理 业务 逻辑 的 代码 。 

Vue 生命 周期 钩子 常 用 的 有 created 和 mounted。created 函数 在 实例 创建 完成 后 调用 ， 
此 阶段 完成 了 data 数据 的 初始 化 ， 但 el 还 没有 初始 化 ，mounted 函数 在 el 挂 载 到 实例 上 之 
后 调用 ， 此 阶段 完成 挂 载 ， 可 以 开始 处 理 业务 逻辑 。 

在 项 目 VueTest 中 ， 新 建 一 个 页 面 lifecycle.html， 用 于 演示 Vue 生命 周期 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<script type="text/javascript" src="js/vue.min.js"></script> 
</head> 
<body> 
<div id="app"> 
{{ message }} 
</div> 
<script> 
Var app = new Vuel({ 
el: '#app', 
data: { 
message: 'Hello Vue!' 
} 
created: function() { 
console.group ('created 创建 完毕 状态 =======》')，; 
// undefined 
console.log("%c%s", "color:red", "el : " + this.$el); 
// 已 被 初始 化 
console.log("%c%s", "color:red", "message: " + this.message) 
}, 
mounted: function() { 


console .group ('mounted 挂 载 结束 状态 =======》'); 

// 已 被 初始 化 
console.10og("%c%s"; “COlLorsEedny "el s "+ this.$el)r 
console.log (this.s$el); 

// 已 被 初始 化 


console.log("%c%s", "color:red", "message: "+ 
this.message); 
} 
</script> 
</body> 
</html> 
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在 chrome 浏览 器 中 浏览 页 面 lifecyclehtml， 按 下 F12 键 , 打开 开发 者 工具 ,在 Console 
中 查看 函数 的 执行 情况 ， 如 图 18-18 所 示 。 


民间 | Eements Console Sources Network 。 Performance Memory » 3 

四 @ wp vv | Fiter Default levels 国 Group similar 

v created 创 津 完毕 找 态 == index.html? hbt=1531534676683:21 
el : undefined index.html? hbt=1531534676683:22 
message: Hello Vue! index.html? hbt=1531534676683:23 


mounted 挂 载 结束 状态 =- 


index.html? hbt=1531534676683:26 


el ; [object HTMLDivElement] jindex. hbt=1531534676683:27 
div id-"app index.html? hbt=1531534676683:28 
Hello Vue! 
/div: 
message: Hello Vuel index.html? hbt=1531534676683:29 


18-18 ”查看 生命 周期 钩子 


18.3.4 ”模板 语 


Vuejjs 使 用 了 基于 HTML 的 模板 语法 ， 可 以 采用 简洁 的 模板 语法 声明 式 地 将 数据 泻 染 
进 DOM。 通 过 结合 响应 系统 ， 在 应 用 状态 改变 时 ， 能 智能 地 计算 重新 泻 染 组 件 的 最 小 代价 
并 应 用 到 DOM 操作 上 。 


1. 插值 


1) 文本 
数据 绑 定 最 常见 的 形式 就 是 使 用 {{..…}}( 双 大 括号 ) 的 文本 插值 ， 示 例如 下 : 


<div id="app"> 
<p>{{ message }}</p> 
</div> 


2) 原始 HTML 

双 大 括号 会 将 数据 解释 为 普通 文本 ， 而 非 HTML 代码 。 为 了 输出 真正 的 HTML， 需 要 
使 用 v-html 指令 。 

在 项 目 VueTest 中 ， 新 建 一 个 页 面 vhtmlhtml， 使 用 v-html 指令 ， 代 码 如 下 : 


<body> 
<div id="app"> 
<div v-html="message"></div> 
</div> 
<script> 
var app = new Vuel({ 
el: '#app', 
data: { 
message: '<hl>Hello Vue!</hl>" 
} 
1) 
</script> 
</body> 
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浏览 页 面 vhtmlLhtml， 页 面 输出 内 容 为 Hello Vue!。 如 果 使 用 {{ message }}， 则 输出 内 
容 为 <hl>Hello Vue!</h1>。 


3) 属性 

如 果 想 动态 更 新 HTML 元 素 上 的 属性 ， 比 如 id、class 和 style 等 ， 可 以 使 用 v-bind 
指令 。 

在 项 目 VueTest 中 ， 新 建 一 个 页 面 vbind.html， 使 用 v-bind 指令 ， 代 码 如 下 : 

<body> 


<div id="app"> 
<div v-bind:style="styleObject">Hello Vue!</div> 


</div> 
<script> 
new Vuel({ 
el: '#app', 
data: { 
styleObject: { 
color: 'red', 
fontSize: '25px' 
t 
} 
1D); 
</script> 
</body> 


v-bind:style 的 对 象 语法 非常 直观 ， 它 是 一 个 JavaScript 对 象 ， 很 像 CSS。 浏 览 页 面 
vbind.html， 页 面 输 出 内 容 如 图 18-19 所 示 。 


D 127.0.0.1:8020/VueTes: x 到 
© |© 127.00.1.8020/VueTest/vbind.html.， 食 


Hello Vue! 


图 18-19 ”v-bind 指令 示例 效果 


4) 表达 式 
Vuejs 提供 了 完全 的 JavaScript 表达 式 支持 ， 在 项 目 VueTest 中 ， 新 建 一 个 页 面 
expression.html， 在 页 面 中 使 用 表达 式 ， 代 码 如 下 : 


<body> 
<div id="app"> 
45+10}8}<br> {{ flag ? "YES" : NO }}<br> 
{{ message.split('') .reverse() .join('') }} 
<div v-bind:id="'list-' + id">Hello Vue! </div> 
</div> 
<script> 
Var app = new Vuel({ 
el: "#app's 


全 < De de 
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data: { 
flag: true, 
message: '"'Hello Vuel!', 
1d 10 
1) 
</script> 
</body> 


这 些 表达 式 会 在 所 属 Vue 实例 的 数据 作用 域 下 作为 JavaScript 脚本 被 解析 ， 浏 览 页 面 
expression.html， 页 面 输出 内 容 如 图 18-20 所 示 。 


DD 127.0.0.1:8020/VueTest x 生 
GC |© 127.0.0.1:8020/VueTest/expression...， 人 | ~™ 


15 

YES 

!euV olleH 
Hello Vue ! 


图 18-20 ”表达 式 使 用 效果 


2. 指令 
指令 (Directives) 是 带 有 v- 前 缀 的 特殊 特性 ， 用 于 在 表达 式 的 值 改 变 时 ， 将 某 些 行为 应 


用 到 DOM 上 。 
在 项 目 VueTest 中 ， 新 建 一 个 页 面 directives.html， 在 页 面 中 使 用 指令 ， 代 码 如 下 : 


<body> 
<div id="app"> 
<p v-if="show"> 这 是 一 段 文本 </p> 
</div> 
<script> 
var app = new Vue({ 
el: '#app', 
data: { 
show: true 
} 
1) 
</script> 
</body> 


当 数 据 show 的 值 为 tue 时 ，<p> 标 签 会 被 插入 ， 为 false 时 则 会 被 移 除 。 运 行 页 面 
directives.html， 页 面 输出 内 容 为 “这 是 一 段 文本 ”。 如 果 将 show 修改 为 false， 则 页 面 不 显 


示 这 段 文本 。 

一 些 指令 能 够 接收 一 个 参数 ， 在 指令 名 称 之 后 以 冒号 隔 开 。 例 如 vbind:href， 这 里 href 
是 参数 ， 告 知 v-bind 指令 将 该 元 素 的 href 特性 与 表达 式 url 的 值 绑 定 。 

在 项 目 VueTest 中 ， 新 建 一 个 页 面 parameter.html， 演 示 指 令 参数 的 使 用 ， 代 码 如 下 : 


<body> 
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<div id="app"> 
<pre><a v-bind:href="url"> 百 度 </a></pre> 
</div> 
<script> 
Var app = new Vuel({ 
el: '#app', 
data: { 
url: 'http://www.baidu.com' 


1) 
</script> 
</body> 


浏览 页 面 parameter.html， 页 面 中 显示 一 个 百度 链接 ， 单 击 该 连接 ， 跳 转 到 百度 官网 。 


3. 用 户 输入 


在 input 输入 框 中 ， 可 以 使 用 v-model 指令 实现 双向 数据 绑 定 。 在 项 目 VueTest 中 ， 新 
建 一 个 页 面 vmodel.html， 演 示 v-model 指令 的 使 用 ， 代 码 如 下 


<body> 
<div id="app"> 
<p>{{ message }}</p> 
<input v-model="message"> 
</div> 
<script> 
Var app = new Vuel({ 
el: '#app', 
data: { 
message: 'Hello Vue!' 


</script> 
</body> 
Vv-model 指令 可 以 自动 让 原生 表单 组 件 的 值 自动 和 用 户 输入 的 值 绑 定 ， 在 这 个 示例 中 输 
入 框 的 值 和 数据 message 是 绑 定 的 ， 若 输入 框 的 值 变化 ， 则 和 它 绑 定 的 值 也 会 发 生变 化 。 
浏览 页 面 vmodel.html， 页 面 效果 如 图 18-21 所 示 。 在 输入 框 中 修改 内 容 后 ， 和 它 绑 定 
的 值 也 会 发 生变 化 ， 页 面 效果 如 图 18-22 所 示 。 


D 1z700180z0vueres x Ne 


D127.0.0.1:8020/VueTes: x 全 下 


CG | © 127.00.18020/VueTest… 人 GC |©@ 127.00.1:8020/NueTest... 会 


Hello Vue! Hello Vue! 改变 一 下 试 试 ! 

[Hallo Vue! IHelle Vue! 改变 一 下 试 试 !| 

18-21 页 面 vmodel.html 效 果 1 图 18-22 页 面 vmodel.html 效果 2 
4. 过 滤器 


Vuejs 允许 自 定义 过 滤器 ， 实 现 对 输入 数据 的 处 理 ， 并 返回 处 理 结果 。 过 滤器 在 双 花 括 
号 插值 和 v-bind 表达 式 这 两 个 地 方 使 用 。 过 滤器 应 该 被 添加 在 JavaScript 表达 式 的 尾部 ,由 


[254 ct 
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管道 符号 指示 。 
在 项 目 VueTest 中 ， 新 建 一 个 页 面 filter.html， 演 示 Vue 过 滤器 的 使 用 ， 代 码 如 下 : 
<body> 


<div id="app"> 
{{ message|lcapitalize}} 


</div> 
<script> 
var app = new Vue({ 
el: '#app', 
data: { 
message: 'welcome!' 
}, 
filters: { 
capitalize: function(value) { 
if(!value) return '"' 
value = value.toString() 
return value.charAt (0) .toUpperCase() + value.slice(1) 
} 
} 
}) 
</script> 
</body> 


filters 选项 用 于 在 Vue 实例 内 部 注册 一 个 过 滤器 , 过 滤器 函数 始终 以 表达 式 的 值 作为 第 
一 个 参数 。 在 这 个 示例 中 ，capitalize 过 滤器 函数 将 会 接收 message 的 值 作为 第 一 个 参数 。 

浏览 页 面 filter.html, 数据 对 象 data 中 的 message 属性 值 welcome! 的 首 字母 变 为 大 写 了 ， 
效果 如 图 18-23 所 示 。 


D 1270010020usTec x Ne 


C |@® 1270.0.1:8020/VueTesvihterht.. 立 


Welcome! 


图 18-23 ”Vue 过 滤器 示例 效果 
5. 缩写 


Vuejjs 为 v-bind 和 v-on 这 两 个 最 常用 的 指令 提供 了 特定 简写 ，v-bind 指令 缩写 前 后 的 
对 比如 下 : 

<!-- 完整 语法 --> 

<a v-bind:href="url"></a> 

<!-- 缩写 --> 


<a :href="url"></a> 


v-on 指令 缩写 前 后 的 对 比如 下 : 
<!-- 完整 语法 --> 


<a Vv-on:click="doSomething"></a> 
< =-- 缩写 --> 


<a @click="doSomething"></a> 
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18.3.5 ”计算 属性 


模板 内 的 表达 式 非常 便利 ， 常 用 于 简单 运算 。 但 在 模板 中 放 入 大 量 的 逻辑 会 让 模板 难 
以 维护 。 为 了 解决 这 个 问题 ， 可 以 使 用 计算 属性 。 

在 项 目 VueTest 中 ， 新 建 一 个 页 面 computed_properties.html， 使 用 计算 属性 显示 变量 
message 的 反 转 字符 串 ， 代 码 如 下 : 


<body> 
<div id="app"> 
{{ reversedMessage }} 
</div> 
<script> 
Var app = new Vuel({ 
el: '#app', 
data: { 
message: 'Hello Vue!' 
} 7 
computed: { 
// 计算 属性 的 getter 
reversedMessage: function() { 
// this 指向 当前 vue 的 实例 


return this.message.split('').reverse() .join('') 


} 
}) 
</script> 
</body> 
在 Vue 的 computed 选项 中 , 定义 了 一 个 计算 属性 reversedMessage， 它 提供 的 函数 将 作 
为 属性 reversedMessage 的 getter 方法 ， 返 回 变量 message 反 转 后 的 字符 串 ， 然 后 通过 
{{ reversedMessage }} 显 示 出 来 。 
浏览 页 面 computed_properties.html, 页 面 显 示 message 变量 反 转 后 的 字符 串 , 如 图 18-24 
所 示 。 


D 1270018020VueTes x NN 


C |© 127.0.0.1:8020/VueTest/computed.. 会 


!euV olleH 


图 18-24 Vue 计算 属性 示例 效果 


18.3.6 “条件 泻 染 


与 JavaScript 的 条 件 语句 让 、else、else 站 类 似 ， Vue.]s 提供 的 条 件 泻 染指 令 v-if、 v-else、 
v-else- 让 可 以 根据 表达 式 的 值 将 DOM 中 的 元 素 或 组 件 演 染 或 销毁 。 
在 项 目 VueTest 中 ， 新 建 一 个 页 面 vifhtml， 使 用 Vuejs 的 条 件 泻 染 ， 代 码 如 下 : 


< et 
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<body> 
<div id="app"> 
<p Vv-if="score>=90"> 优 秀 </p> 
<p v-else-if="score>=80"> 良 好 </p> 
<p v-else-if="score>=70"> 中 等 </p> 
<p v-else-if="score>=60"> 及 格 </p> 
<p v-else> 不 及 格 </p> 


</div> 
<script> 
var app = new Vuel({ 
el: '#app', 
data: { 


score: 85 
} 
1) 
</script> 
</body> 
V- 寺 、v-else、v-else-if 作为 指令 ， 必 须 将 它们 添加 到 一 个 标签 上 ， 这 里 在 <p> 标 签 上 使 
用 这 些 指令 。v-else- 让 要 紧 跟 在 v- 让 之 后 ，v-else 要 紧 跟 在 v- 计 或 v-else-f 之 后 。 哪 个 <p> 标 
签 上 的 条 件 成 立 ， 就 泻 染 哪个 标签 ， 而 其 他 不 满足 条 件 的 <p> 标 签 就 会 被 销毁 。 
浏览 页 面 vifhtml， 页 面 输 出 如 图 18-25 所 示 。 


BD 127001e020VueTer x 全 
€ 3 @|01270013020VusTesyvithtmP _ 合 


良好 


图 18-25 ”Vue 条 件 泻 染 示例 效果 
18.3.7 “列表 泻 染 


如 果 想 要 循环 显示 一 个 数组 或 一 个 对 象 属性 时 ， 可 以 使 用 v-for 指令 。 在 项 目 VueTest 
中 ， 新 建 一 个 页 面 vforhtml， 使 用 v-for 指令 对 数组 类 型 数据 进行 泻 染 ， 代 码 如 下 : 


<body> 
<div id="app"> 
<ul> 
<li v-for="student in students">{{ student.name }}</1i> 
</ul> 
</div> 
<script> 
Var app = new Vuel({ 
el: '#app', 
data: { 
students: [ 
{ name: 'zhangsan'}, 
{ name: 'lisi'}, 
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{ name: 'wangwu'}, 


{ name: 'zhaoliu'}, 


} 
1) 
</script> 
</body> 
在 data 选项 中 ,定义 了 一 个 数组 类 型 的 数据 students, 用 v-for 指令 将 <li> 标 签 循环 泻 染 。 
在 v-for 指令 的 表达 式 中 ，students 是 源 数据 数组 ，student 是 数组 元 素 迭 代 的 别名 。 
浏览 页 面 vforhtml， 页 面 输出 如 图 18-26 所 示 。 


DD 127.0.0.1:8020/VueTes: x Ne 
€ 3 © |© 127.00.1:8020/VueTesWvforhtml?.. 人 女 


。 zhangsan 
® lisi 


® wangwu 
。 zhaoliu 


18-26 ”数组 泻 染 


除了 数组 外 ， 对 象 的 属性 也 可 以 使 用 v-for 指令 进行 泻 染 。 在 项 目 VueTest 中 ， 新 建 一 
个 页 面 vfor2.html， 使 用 v-for 指令 泻 染 对 象 的 属性 ， 代 码 如 下 : 


<body> 
<div id="app"> 
<ul> 
<1Li v-for=" (value, key, index) in stu"> 
{{ index }}-{{ key }}:{{ value }}</1i> 


</ul> 
</div> 
<script> 
var app = new Vuel({ 
el: '#app', 
data: { 
Stus. { 
name: 'zhangsan', 
age: 21, 
gender: ' 男 ' 
} 
} 
1) 
</script> 


</body> 


在 Vue 的 data 选项 中 ， 定 义 了 一 个 对 象 stu, 它 有 三 个 属性 。 遍历 对 象 属性 时 ， 有 两 个 
可 选 参数 ，index 是 索引 ，key 是 键 名 。 
浏览 页 面 vfor2.html， 页 面 输出 如 图 18-27 所 示 。 
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D 127.0.0.1:8020/VueTes: x 业 


CC |© 127.0.0.1:8020/VueTest/vfor2ht... 人 女 


。 0-name:zhangsan 
。 1-age:21 
。 2-gender 男 


18-27 ”对 象 的 属性 泻 染 
18.3.8 方法 和 事件 


在 Vue 实例 中 ， 可 以 在 methods 选项 内 定义 一 个 方法 。 那 么 ， 如 何 通过 一 个 按钮 调用 
这 个 方法 呢 ? 可 以 使 用 v-on 指令 监听 这 个 按钮 的 点 击 事件 ， 并 在 触发 时 调用 这 个 方法 。 
在 项 目 VueTest 中 ， 新 建 一 个 页 面 method_event.html， 演 示 方 法 和 事件 的 使 用 ， 代 码 
如 下 : 
<body> 
<div id="app"> 
购买 数量 : {{ quantity }} 


<button @click="add()"> + </button> 
<button v-if="quantity>1" Q@click="subtract()"> - </button> 


</div> 
<script> 
Var app = new Vuel({ 
el: '#app', 
data: { 
quantity: 1 
] 
methods: { 
add: function(quantity) { 
quantity = quantity || 1; 
// this 指向 当前 Vue 实例 app 
this.quantity += 17 
jy 
subtract: function(quantity) { 
quantity = quantity || 1; 
// this 指向 当前 Vue 实例 app 
this.quantity -= 1; 
+ 
} 
}) 
</script> 
</body> 


在 Vue 实例 的 methods 选项 内 ， 定 义 了 add 和 subtract 两 个 方法 ，add 方法 将 quantity 
属性 值 加 1, subtract 方法 将 quantity 属性 值 减 1。 在 methods 中 定义 的 方法 可 供 @click 调用 ， 
在 + 和 -两 个 <button> 标 签 中 ， 就 是 通过 @click 调用 methods 内 的 方法 的 。 
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浏览 页 面 method event.html, 点 击 + 或 -按钮 ， 可 对 购买 数量 计数 ， 如 图 18-28 所 示 。 


D 127.0.0.+:8020/VueTes: x WN 
© |© 127.00.1:8020/VueTest/method_eve.… 会 


购买 吉星 : 2 国 ] 国 | 
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18.3.9 ”Vue 组 件 


组 件 (Component) 是 Vuejjs 最 强大 的 功能 之 一 , 组 件 可 以 扩展 HTML 元 素 , 封装 可 重用 
的 代码 ， 通 过 可 复 用 的 小 组 件 可 以 构建 大 型 应 用 。 

组 件 是 可 复 用 的 Vue 实例 ,所 以 它们 与 new Vue 接收 相同 的 选项 ,例如 data、computed、 
watch、methods 以 及 生命 周期 钩子 等 ， 只 是 没有 el 选项 ，el 是 根 实例 特有 的 选项 。 

组 件 需要 注册 后 才能 使 用 ， 注 册 有 全 局 注册 和 局 部 注册 两 种 方式 。 全 局 注册 后 ， 所 有 
的 Vue 实例 都 可 以 使 用 该 组 件 。 

在 项 目 VueTest 中 ， 新 建 一 个 页 面 componentl.html， 演 示 如 何 注 册 全 局 组 件 ， 代 码 
如 下 : 


<body> 
<div id="app"> 
<my-counter></my-counter> 
<my-counter></my-counter> 
</div> 
<script> 
// 注册 全 局 组 件 
Vue .component ('my-counter', { 
data: function() { 
return { 
count: 0 
} 
]v 
template: '<button @click="count++"> 点 击 了 {{ count }} 次 
</button>' 


Ds; 
// 创建 根 实例 
Var app = new Vuel({ 
el: '#app' 
</script> 
</body> 
在 页 面 componentl.html 中 ， 注 册 了 一 个 全 局 组 件 my-counter， 这 个 组 件 显示 的 内 容 是 
在 template 选项 中 定义 的 , 这 里 定义 了 一 个 <button> 模 板 。 单 击 按钮 时 , 会 对 这 个 组 件 内 data 
函数 返回 的 数据 count 执行 递增 操作 。 
全 局 组 件 my-counter 注册 后 , 在 父 实例 中 可 以 用 <my-counter></my-counter> 这 样 的 形式 


< oe 
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来 使 用 组 件 ， 这 里 组 件 my-counter 使 用 了 2 次 。 
浏览 页 面 componentl.html， 出 现 两 个 按钮 。 单 击 这 两 个 按钮 ， 它 们 之 间 互 不 影响 ， 可 
实现 各 自 计数 功能 ， 如 图 18-29 所 示 。 
TAR 一 


C |© 127.00.1:8020/VueTest/component.. 食 |™ 5 
洪 应 用 四 从 Firefor 导 入 洋 应 用 » 二 他 书 笠 


点 击 了 3 次 || 点 击 了 5 次 
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使 用 组 件 可 以 把 模板 中 的 内 容 进 行 复 用 ， 然 而 组 件 之 间 还 需要 进行 通信 。 通 常 父 组 件 
中 会 包含 子 组 件 ， 父 组 件 要 将 数据 传递 给 子 组 件 ， 子 组 件 会 根据 接收 的 数据 来 泻 染 不 同 的 
内 容 或 执行 不 同 的 操作 。 要 让 子 组 件 使 用 父 组 件 的 数据 ， 需 要 通过 子 组 件 的 props 选项 ， 
也 就 是 说 子 组 件 要 显 式 地 用 props 选项 声明 它 期 待 获得 的 数据 。 使 用 props 传递 数据 包括 静 
态 和 动态 两 种 形式 。 
在 项 目 VueTest 中 , 新 建 一 个 页 面 component2.html, 使 用 静态 props 实现 将 父 组 件数 据 
传递 给 子 组 件 ， 代 码 如 下 : 
<body> 
<div id="app"> 
<child message="Hello Vue!"></child> 
</div> 
<script> 
// 注册 全 局 组 件 
Vue .component ('child', { 
// 声明 props, 期 望 从 父 组 件 获取 数据 message 
props: ['message'], 
template: '<span>{{ message }}</span>' 


}) 
// 创建 根 实例 
var app = new Vuel({ 
el: '#app' 
}) 
</script> 
</body> 
在 子 组 件 child 的 template 模板 中 ，{{ message }} 显 示 的 内 容 message 就 是 父 组 件 传递 
来 的 Hello Vue!。 浏 览 页 面 component2.html， 显 示 Hello Vuel。 
类 似 于 用 v-bind 绑 定 HTML 特性 到 一 个 表达 式 ， 也 可 以 用 v-bind 动态 绑 定 props 的 值 
到 父 组 件 的 数据 中 。 每 当 父 组 件 的 数据 变化 时 ， 该 变化 也 会 传导 给 子 组 件 。 
在 项 目 VueTest 中 , 新 建 一 个 页 面 component3.html, 使 用 动态 props 实现 将 父 组 件数 据 
传递 给 子 组 件 ， 代 码 如 下 : 


<body> 
<div id="app"> 
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<input v-model="parentMessage"> 
<br> 
<child v-bind:message="parentMessage"></child> 
</div> 
<script> 
// 注册 全 局 组 件 
Vue .component ('child', { 
// 声明 props, 期 望 从 父 组 件 获取 数据 message 
props: ['message'], 
template: '<span>{{ message }}</span>' 


1) 

// 创建 根 实例 

var app = new Vuel({ 
el: "'#app', 
data: { 

parentMessage: '' 

} 

}) 

</script> 
</body> 


需要 注意 ，props 是 单 向 绑 定 的 ， 当 父 组 件 的 属性 变化 时 ， 将 传导 给 子 组 件 ， 但 是 不 会 
反 过 来 。 浏 览 页 面 component3.html， 页 面 效 果 如 图 18-30 所 示 。 


D 127.00.1:8020/VueTest x Ne 
GC |© 127.00.1:8020/VueTest/component3...， 会 


Hell, Vue ] 


Hello, Vue 


图 18-30 动态 props 


在 输入 框 中 , 输入 Hello, Vue, 这 个 父 组 件 的 数据 将 实时 传递 给 子 组 件 child。 子 组 件 将 
接收 这 个 数据 ， 并 显示 在 自己 的 模板 中 ， 输 入 框 下 方 显示 的 是 子 组 件 的 内 容 ， 数 据 来 自 父 
组 件 。 


18.3.10 ”Vue 脚手架 


vue-cli 是 Vue 的 脚手架 工具 ， 它 大 大 降低 了 webpack 的 使 用 难度 ， 支 持 热 更 新 ， 有 
webpack-dev-server 的 支持 ， 相 当 于 启动 了 一 个 请 求 服务 器 ， 搭 建 了 一 个 测试 环境 。 

使 用 vue-cli 前 ， 要 确保 已 经 安装 了 最 新 版 的 Nodejs 和 NPM。 由 于 篇 幅 所 限 ， 此 处 不 
再 介绍 ， 读 者 可 以 参照 本 节 配 套 视频 学 习 安装 过 程 。 

下 面 介绍 如 何 使 用 vue-cil 构建 一 个 项 目 。 

首先 需要 创建 自己 的 工作 空间 , 并 在 命令 端口 切换 至 刚刚 创建 好 的 工作 空间 , 这 里 以 D 
盘 根 目录 为 工作 空间 。 

然后 安装 vue-cil， 可 以 直接 在 cmd 命令 端口 输入 如 下 命令 。 


< Sy oa de a A 


npm install -g vue-cli 


这 个 命令 是 全 局 安装 vue-cli， 上 5 
安装 完成 后 ， 在 命令 端口 输入 命 


vue init webpack vuedemo 


vuedemo 是 项 目 名 称 ， 输 入 命令 后 ， 


如 图 18-31 所 示 。 


Project nane 
Project dl 
Author 

Vue build CU 
Vue build 


t up unit te 
Setup e2e te 
Should we run ‘npn install” for you after the project has been created? Creco! 


图 18-31 


项 目 创建 后 ， 需 要 运行 npm install 安装 依赖 模块 


选项 ， 表 示 自 己 稍 后 安装 。 
在 命令 端口 中 ， 


cd vuedemo 


会 进入 安装 阶 有 


ith Nightwatch? 


切换 到 项 目 路 径 ， 如 下 所 示 : 


再 使 用 命令 给 项 目 添加 依赖 模块 ， 如 下 所 示 : 


npm install 


安 3 


npm run dev 


打开 浏览 器 ， 输 入 地 址 http://localhost:8080， 


完成 后 ， 在 命令 端口 输入 命令 ， 就 可 以 启动 这 


Vv 


Welcome to Your Vue.js App 


al Links 


Ecosystem 


需 运 行 一 次 就 可 以 了 ， 以 后 就 不 上 
证 令 ， 创 建 一 个 基于 webpack 模板 的 新 项 目 ， 如 下 所 示 : 


项 目 安装 阶段 输入 或 确认 信息 
这 里 先 选 择 No,I will handle that myself 


页 面 效果 如 图 18-32 所 


图 18-32 ”使 用 vue-cli 创建 的 项 目 
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安装 了 。 


受 ， 需 要 用 户 输入 或 确认 一 些 信 息 ， 


个 项 目 了 ， 如 下 所 示 : 


示 。 
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18.3.11 Vue 路 由 


使 用 Vuejs 路 由 可 以 根据 不 同 的 URL 访问 不 同 的 内 容 ， 从 而 实现 单 页 面 富 应 用 (SPA)。 
使 用 Vue.js 路 由 前 需要 安装 vue-router。 在 “Vue 脚手架 ”一 节 创 建 的 项 目 vuedemo 中 , 已 
经 添加 了 vue-router。 如 果 项 目 中 没有 安装 ， 可 以 在 命令 端口 输入 如 下 命令 : 


npm install --save vue-router 


在 SPA 应 用 中 ， 每 个 页 面 对 应 一 个 .vue 文件 。 使 用 Hbuilder 打开 项 目 vuedemo, 在 src 
目录 下 创建 views 子 目 录 ， 然 后 在 views 里 面 创建 cart.vue 和 list.vue 两 个 Vue 文件 。 
然后 ， 在 src/router 目录 下 ， 创 建 routerjs 文件 ， 内 容 如 下 : 


// 引入 组 件 
import cart from "../views/cart.vue"; 
import list from "../views/list.vue"; 
const routers = [ 
| 
path: */iist"s 
meta: { 
title: "商品 列表 ' 
] 
component: list 
a 
path: '/cart', 
meta: { 
title: ' 购 物 车 ' 
}, 
component: cart 
} 
]; 
export default routers; 
在 router.js 文件 中 ， 首 先 引 入 cart.vue 和 list.vue 两 个 组 件 ， 然 后 创建 一 个 数组 routers 
来 指定 路 由 匹配 列表 ， 每 个 路 由 映射 一 个 组 件 。 
在 mainjs 文件 中 ， 首 先 引 入 vue-router 和 src/router 目录 下 的 routerjs 文件 ， 再 加 载 
vue-router 插件 ， 如 下 所 示 : 
import Vue from 'vue' 
import App from './App' 
import router from './router' 
// 引入 vue-router 
import VueRouter from 'vue-router'; 
// 引入 src/router 目录 下 的 router.js 文件 
import Routers from './router/router'; 


// 加 载 vue-router 插件 


Vue.use (VueRouter) 


然后 完成 路 由 配置 ， 并 定义 路 由 组 件 ， 如 下 所 示 : 
// 路 由 配置 


< Sd a a a a a 
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Const RouterConfig = { 
// 使 用 HTML5 的 History 路 由 模式 
mode: "history'yv 
routes: Routers 


Fs 

// 定义 路 由 组 件 

const router = new VueRouter (RouterConfig); 

在 RouterConfig 里 ， 设 置 mode 为 history, 使 用 HTMLS5 的 History 路 由 模式 ， 通 过 “/” 
设置 路 径 。 如 果 不 配置 ， 则 使 用 “#” 设 置 路 径 。 设 置 routes 为 Routers，Routers 就 是 之 前 
引入 的 src/router 目录 下 的 routerjs 文件 。 以 RouterConfig 为 参数 ， 通 过 实例 化 VueRouter 
来 创建 一 个 路 由 组 件 router。 

最 后 在 Vue 的 根 实 例 中 引用 这 个 路 由 组 件 ， 如 下 所 示 : 

new Vue ({ 

el: '#app', 
router: router,， // 引用 路 由 实例 router 
render: h => { 
return h (APP) 
} 

D1); 

至 此 ， 路 由 就 配置 好 了 。 接 下 来 就 可 以 设置 跳 转 了 ， 可 以 使 用 vue-router 提供 的 
<router-link>， 它 会 被 演 染 为 一 个 <a> 标 签 。 

在 App.vue 组 件 的 模板 中 , 添加 两 个 <router-link>, 用 作 购 物 车 页 和 商品 列表 页 的 链接 ， 
如 下 所 示 : 

<template> 

<div id="app"> 
<!--<img src="./assets/logo.png">--> 
<router-view/> 
<router-link to="/cart"> 购 物 车 </router-link> 
<router-link to="/1ist"> 商 品 列表 </router-link> 
</div> 

</template> 

在 命令 端口 启动 服务 ， 打 开 浏 览 器 ， 输 入 地 址 http://localhost:8080/vuedemo， 页 面 效 果 
如 图 18-33 所 示 。 在 页 面 中 ， 单 击 购物 车 链接 ， 打 开 购 物 车 页 ， 如 图 18-34 所 示 。 单 击 商品 
列表 链接 ， 则 打开 商品 列表 页 。 


€ > CC © loclhoste080/cart 
€ GC |© Iocalhost8080/vuedemo 会 


购物 车 页 


购物 车 商品 列 到 


图 18-33 ”App.vue 组 件 内 容 图 18-34 ”购物 车 页 
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18.3.12 ”Vuex 状态 管理 


Vuex 是 一 个 专 为 Vuejjs 应 用 程序 开发 的 状态 管理 模式 ， 它 采用 集中 式 存储 管理 应 用 的 
所 有 组 件 的 状态 ， 并 以 相应 的 规则 保证 状态 以 一 种 可 预测 的 方式 发 生变 化 。 

一 个 组 件 通常 包括 数据 和 视图 ， 数 据 改变 时 ， 视 图 也 会 随 之 更 新 。 在 视图 中 ， 可 以 绑 
定 一 些 事件 。 例 如 ， 可 以 给 一 个 <button> 按 钮 绑 定 click 事件 ， 然 后 通过 methods 选项 中 定 
义 的 方法 处 理 这 个 事件 ， 从 而 改变 数据 、 更 新 视图 。 但 是 一 个 组 件 内 的 数据 和 方法 只 能 
这 个 组 件 里 被 使 用 ， 其 他 组 件 无 法 使 用 。 为 了 能 让 其 他 组 件 共享 这 些 数据 和 方法 ， 可 以 通 
过 Vuex 来 统一 管理 组 件 状 态 。 

首先 需要 安装 Vuex, 在 命令 端口 中 , 切换 到 项 目 vuedemo 的 路 径 , 这 里 为 d:\vuedemo。 
在 命令 端口 中 输入 命令 ， 通 过 NPM 安装 Vuex， 如 下 所 示 : 


npm intall --save vuex 


然后 在 main.js 文件 中 ， 引 入 并 加 载 Vuex 插件 ， 如 下 所 示 : 
// 引入 Vuex 


import Vuex from 'Vuex'7 
// 加 载 vuex 插件 


Vue.use (Vuex); 
接着 在 main.js 文件 中 配置 Vuex， 如 下 所 示 : 
// vuex 配置 


Const store = new Vuex.Storel({ 
state: { 


mutations: { 
increment (state) { 
state.count++ 
} 
} 
Eh 


最 后 ， 还 需要 在 根 实例 中 引用 这 个 Vuex 实例 store， 如 下 所 示 : 


new Vue ({ 
ES PPpw 
router: routerr 
store:store, // 引用 Vuex 实例 store 
render: h => { 
return h(App) 
} 
Ds; 


仓库 store 包含 应 用 数据 (状态 ) 和 操作 过 程 ， 数 据 保存 在 Vuex 的 state 选项 中 ， 这 里 定 
义 了 一 个 数据 count， 初 始 值 为 0。 
任何 一 个 组 件 都 可 以 使 用 这 个 数据 count， 在 App.vue 组 件 的 模板 <template> 中 使 用 数 


< Sd dd a a 
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据 count， 代 码 如 下 : 


<template> 
<div id="app"> 


a 使 用 Vuex 中 的 数据 --> 
{{ $store.state.count }} 
</div> 
</template> 
此 时 ， 在 命令 端口 启动 服务 ， 打 开 浏 览 器 ， 输 入 地 址 http://localhost:8080/vuedemo， 页 
面 显示 计数 0， 如 图 18-35 所 示 。 
如 果 想 修改 state 中 的 数据 count， 可 以 在 Vuex 的 mutations 选项 中 定义 方法 ， 这 里 定 
义 了 increment 方法 ， 实 现 数据 count 的 自 增 。 
在 组 件 中 ， 可 以 通过 this.$store.commit 方法 调用 Vuex 的 mutations 选项 中 定义 的 方法 。 
在 App.vue 组 件 中 ， 首 先 在 模板 <template> 中 添加 一 个 <button> 按 钮 ， 如 下 所 示 : 


<button @click="add">+</button> 


然后 在 <script></script 部 分 ， 添 加 一 个 methods 选项 ,在 选项 中 添加 一 个 add 方法 ,用 
来 处 理 按钮 的 click 事件 。 在 这 个 事件 处 理 函 数 中 ， 调 用 Vuex 的 mutations 选项 中 定义 的 
increment 方法 ， 如 下 所 示 : 


<script> 
export default { 
name: 'App', 
methods: { 
add() { 
this.$store.commit ('increment'); 


} 
} 
} 
</script> 


此 时 ， 页 面 多 了 一 个 按钮 ， 单 击 这 个 按钮 ， 计 数 会 增加 ， 如 图 18-36 所 示 。 


€ CC |© localhost8080/vuedemo 人 女 | 一 : 


网 掀 车 商品 列 才 1 区 ] 


图 18-35 访问 state 中 的 数据 18-36 ”访问 mutations 中 的 方法 


假设 在 Vuex 的 state 选项 中 有 一 个 数组 类 型 的 数据 priceList, 里 面 存放 了 不 同 商品 的 价 
格 。 在 组 件 中 ， 如 果 不 想 直接 使 用 这 个 数据 ， 而 是 希望 对 价格 过 滤 后 再 使 用 ， 则 可 以 使 用 
Vuex 的 getters 选项 。 

在 main.js 文件 的 Vuex 中 ， 首 先 在 state 选项 中 定义 一 个 数组 类 型 的 数据 priceList， 值 
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为 [624, 134, 453, 567, 245]; 然后 添加 一 个 getters 选项 , 以 价格 小 于 500 为 条 件 , 计算 priceList 
过 滤 后 的 数据 ， 并 存储 在 数据 filterPrice 中 ， 如 下 所 示 : 

// vuex 配置 


Const store = new Vuex.Storel({ 
state: { 
count: 0, 
// 价格 列表 


priceList: 


[624, 134, 453, 567, 245] 


}, 
mutations: { 
increment (state) { 
state.count++ 


} 


bx 
getters: { 
filterPrice: state => { 
return state.priceList.filter(item => item < 500); 


} 


1) 
在 App.vue 组 件 的 模板 中 ， 使 用 过 滤 后 的 数据 filterPrice， 如 下 所 示 : 


<!-- 获取 过 滤 后 的 价格 --> 


{{ $store.getters.filterPrice }} 


此 时 ， 页 面 显示 了 价格 小 于 500 的 数字 ， 如 图 18-37 所 示 。 


C |@ ocalhost8080/wuedemo 从 


购物 车 商品 列 雪 0 国 ] [ 134, 453, 245】 


18-37 ”访问 getters 中 的 方法 
之 前 讲解 的 mutations 是 同步 改变 state 状态 的 ， 如 果 想 异步 改变 ， 可 以 使 用 Vuex 的 


actions 选项 。 
在 main.js 文件 的 Vuex 中 ， 添 加 一 个 actions 选项 ， 如 下 所 示 : 


// vuex 配置 


Const store = new Vuex.Storel({ 
mutations: { 
increment (state) { 
state.count++ 
} 
}, 


actions: { 
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// 异步 调用 ，3 秒 后 再 提交 mutations 中 的 increment 方法 
asycIncrement (context, callback) { 
setTimeout(() => { 
context.commit ('increment'); 
callback(); 
}, 3000); 


1) 


在 actions 选项 中 ， 定 义 一 个 asycIncrement 方法 ， 通 过 普通 的 回调 来 实现 异步 调用 。 
actions 与 mutations 很 像 ， 不 同 的 是 actions 里 提交 的 是 mutations。 由 于 实际 开发 中 ， 通 过 
异步 调用 向 后 台 服 务 器 请 求 数据 是 一 个 耗 时 的 操作 。 为 了 模拟 这 个 效果 ， 这 里 设置 了 3 秒 
后 再 提交 mutations 中 的 increment 方法 。 

在 App.vue 组 件 的 <script></scrip 亿 部分， 修改 methods 选项 中 的 add 方法 ， 如 下 所 示 : 


<script> 
export default { 
name: 'App', 
methods: { 
add() { 
/*this.$store.commit ('increment');*/ 
this.$store.dispatch('asycIncrement', () => { 
console.log(this.s$store.state.count); 


}) 


} 
} 
</script> 
在 App.vue 组 件 中 ， 通 过 this.$store.dispatch 来 触发 Vuex 的 actions 选项 中 定义 的 
asycIncrement 方法 。 
此 时 ， 浏 览 页 面 ， 单 击 + 按钮 ， 可 以 看 到 等 待 3 秒 后 ， 计 数 才 会 增加 。 


18.4 小 结 
本 章 介绍 了 当前 流行 的 jQuery EasyUI、Bootstrap 和 Vue 三 个 前 端 UI 框架 ， 希 望 读者 


能 够 初步 了 解 这 三 个 框架 。 本 书 最 后 将 基于 SSM 整合 ， 结 合 这 三 个 前 端 UI 框架 ， 详 细 讲 
解 三 个 典型 的 项 目 案例 的 开发 过 程 。 


第 17 章 以 用 户 登录 功能 为 例 ， 详 细 讲 解 了 Spring、Spring MVC 与 MyBatis 框架 (SSM) 
整合 的 流程 。 本 章 将 使 用 SSM 整合 ,并 结合 前 端 Easy UI 框架 实现 电 商 平台 后 台 管 理 系统 。 


19.1 需求 与 系统 分 析 


电 商 平台 后 台 管 理 系 统 用 于 管理 员 登 录 系统 后 ， 对 商品 信息 、 商 品类 型 、 订 单 信息 和 
客户 信息 进行 管理 。 在 这 个 系统 中 ， 管 理 员 用 例 图 如 图 19-1 所 示 。 
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(4) 客户 管理 ， 查 询 客户 、 禁 用 或 启用 客户 。 
根据 上 述 分 析 ， 可 以 得 到 系统 的 模块 结构 ， 如 图 19-2 所 示 。 


电 商 平台 后 台 


商品 管理 | 商品 类 型 管理 订单 管理 客户 管理 
I I 

[ 
添 || 修 查 禁 
添 || 商 || 修 || 查 || 加 || 改 || 包 | 查 看 || 查 |‖| 用 
加 || 品 || 改 || 询 || 高 ||| 高 || 建 || 询 上 除 中 计 上海 中 启 
嘉 || 玉 || 赣 || 可 || 要 || 要 | | 种 瘟 外间 盟 || 客 | 时 
曲 || 品 || 闭 || 闭 | | 单 || 生 男 客 


图 19-2 系统 的 模块 结构 


19.2 数据库 设计 


根据 系统 需求 ， 创 建 名 称 为 eshop 的 数据 库 ， 创 建 8 张 数据 表 ， 如 下 所 示 。 
(1) 客户 信息 表 user_ info， 用 于 记录 前 台 客 户 基本 信息 。 

(2) 管理 员 信息 表 admin_info， 用 于 记录 管理 员 基 本 信息 

(3) 商品 类 型 表 type， 用 于 记录 各 种 商品 类 型 。 

(4) 商品 信息 表 product info， 用 于 记录 商品 信息 

(5) 订单 信息 表 order_ info， 用 于 记录 订单 主要 信 息 。 

(6) 订单 明细 表 order_detail， 用 于 记录 订 单 详细 信息 。 

(7) 系统 功能 表 functions， 用 于 记录 系统 功能 信息 。 

(8) 权限 表 powers， 用 于 记录 管理 员 权限 。 

客户 信息 表 user info 的 字段 说 明 如 表 19-1 所 示 。 


表 19-1 客户 信息 表 user_info 


字段 名 说 明 
id 客户 id 标识， 主键 ， 自 增 
userName 登录 名 
password varchar(16) 登录 密码 
realName varchar(8) 真实 姓名 
Sex 性 别 
address varchar(255) 联系 地 址 
email varchar(50) 电子 邮件 
regDate date 注册 时 间 


管理 员 信息 表 admin_info 的 字段 说 明 如 表 19-2 所 示 。 
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表 19-2 管理 员 信息 表 admin_info 


说 明 
管理 员 id 标识 ， 主 键 ， 自 增 


name varchar(16) -一 一 管理 员 姓 名 

pwd varchar(50 管理 员 密 码 
商品 类 型 表 type 的 字段 说 明 如 表 19-3 所 示 。 

表 19-3 商品 类 型 表 type 


字段 名 类 型 说 明 
id int(4) 类 型 id 标识 ， 主 键 ， 自 增 
name varchar(20) 类 型 名 称 

商品 信息 表 product_info 的 字段 说 明 如 表 19-4 所 示 。 

表 19-4 商品 信息 表 product_info 

字段 名 | 类 型 | 主 外 键 说 明 
ia | ah | Pk | 商品 ja 标识 , 主键, 自 增 
code [vachaQ | | 商品 编号 
name | waeharos9 | | 商品 名 称 
tid iw |Fk | 商品 类 刚 ia 
brand [aes | | 
pig | waeha0s9 | | 商品 图 片 
num [ah | | 商品 数量 
3 | aecimalo% | | 商品 价格 
into | aseu | | 商品 描述 
status nw | | 高 s 以 太 

订单 信息 表 order_info 的 字段 说 明 如 表 19-5 所 示 。 

表 19-5 订单 信息 表 order_info 
字段 名 说 明 

id int(4) 订单 id 标识， 主键 ， 自 增 
uid int(4) 客户 id 
status, varchar(16) 订单 状态 
ordertime datetime 订单 下 单 时 间 


odeprice | usinaa | [iem 


订单 明细 表 order_detail 的 字段 说 明 如 表 19-6 所 示 。 
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字段 名 说 明 
id 订单 明细 id， 主 键 ， 自 增 
oid 订单 id 
pid 商品 id 
num 购买 数量 
系统 功能 表 functions 的 字段 说 明 如 表 19-7 所 示 。 
表 19-7 系统 功能 表 functions 
字段 名 说 明 
id 系统 功能 id， 主 键 ， 自 增 
name 功能 菜单 名 称 
_parentid 父 结 点 id 
url 功能 页 面 
isleaf 是 否 叶子 结 点 
nodeorder 结 点 顺序 


权限 表 powers 的 字段 说 明 如 表 19-8 所 示 。 


表 19-8 权限 表 powers 


创建 数据 表 时 ， 还 需要 设置 数据 表 之 间 的 关联 关系 ， 如 图 19-3 所 示 。 


J user_info 4 
idINT(q) 
userName VARCHAR(16) 
password VARCHAR(16) 
realName VARCHAR(S) 
‘sex VARCHAR(q) 
address VARCHAR(255) 
email VARCHAR(50) 
regDate DATE 
status INT(4) 


Jadmin_info Y 
idINT(4) 
name VARCHAR(16) 
pwd VARCHAR(50) 
> 


Jorderinto 了 


idINT(4 idINT(4) 
uidINT(4) oid INT(4) 
status VAROHAR(16) 出 一 pid INT(4) 
orderime DATETIME num INT(q 
orderprice DECIMAL (8,2) 
>» 
Ffunctions 了 
idINT(4) 
阿 powers Y name VARCHAR(20) 
Yaid INT(4) parentdINT( 习 
Yfd INT(4) url VARCHAR(50) 
> ideafBIT() 
nodeorder INT(4) 


» 


图 19-3 ”系统 数据 表 之 间 关 系 图 


order_detail 


J product info 了 
| WidINT(4) 
| Scode VARCHAR(16) 
| | 2name VARCHAR(255) 
| joudIrGq) 
| | obrand vARcHhAR(20) 
| 
pic VARCHAR(255) 
| Onum IMT 
| Sprice DECIMAL(10,0) 
| Sintro LONGTEXT 
| Ostatus INT() 


+ 


+ 
ype 
idINT(D 
name VARCHAR(20) 


» 
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19.3 ”环境 搭建 与 配置 文件 


可 以 参照 第 17 章 Spring 整合 MyBatis， 完 成 电 商 平台 后 台 管 理 系 统 ecpbm 的 框架 搭建 
及 相关 配置 文件 的 编写 ， 项 目 最 终 的 目录 结构 如 图 19-4 所 示 。 


4 踢 ecpbm 4 src 

4 名 srd/mainfjava 2 6 main 
凯 com.ecpbm.controller 
出 com.ecpbm.dao 


六 


4 BS webapp 


> EasyUI 
出 com.ecpbm.dao.provider Wh Eau 
EE- META-INF 
记 com.ecpbm.pojo a 
出 com.ecpbm.service WEDINE 
册 com.ecpbm.serviceiimpl 久 lib 
出 com.ecpbm.util 四 dispatcherServlet-servlet.xml 
4 加 src/main/resources 四 web.xml 
为 applicationContextxml 国 admin_loginjsp 
司 dbconfig.properties 目 adminjsp 
个 srcfestfjave 央 createorderjsp 
加 src/test/resources 国 orderdetailjsp 


BM JRE System Library WavaSE-9] 


呈 ductlist.j: 
到 Maven Dependencies a 


四 searchorderjsp 


4 src 
2 main 日 ypelistjsp 
» BS webapp 目 userlistjsp 
EB test EB test 
BS target ES target 
国 pomxml Berl 


图 19-4 系统 目录 结构 


com.ecpbm.controller 包 用 于 存放 控制 器 类 ，com.ecpbm.service 包 用 于 存放 业务 逻辑 层 
接口 ，com.ecpbm.service.impl 包 用 于 存放 业务 逻辑 层 接口 的 实现 类 ，com.ecpbm.dao 包 用 于 
存放 数据 访问 层 接口 ，com.ecpbm.dao.provider 包 用 于 存放 DynaSqlProvider 类 ， 
com.ecpbm.pojo 包 用 于 存放 实体 类 。dbconfig.properties 为 存储 数据 库 连 接 信息 的 属性 文件 ， 
applicationContext.xml 为 Spring 框架 的 配置 文件 ,dispatcherServlet-servletxml 为 Spring MVC 
框架 的 配置 文件 ，admin login.jsp 为 管理 员 登 录 页 ，admin.jsp 为 后 台 管 理 首页 面 ， 
productlistjsp 为 商品 列表 页 ，createorder.jsp 为 创建 订单 页 ，searchorder.jsp 为 订单 查询 页 ， 
orderdetailjjsp 为 订单 明细 页 ,userlistjsp 为 客户 列表 页 ,typelistjsp 为 商品 类 型 列表 页 , Easyui 

目录 下 的 文件 或 子 目录 下 的 文件 为 使 用 Easy UI 控件 所 需 的 js、css 等 文件 。 


19.4 创建 实体 类 


在 com.ecpbm.pojo 包 中 ， 依 次 创建 实体 类 UserInfo、AdminInfo、Functions、Powers、 
ProductInfo、Type、OrderInfo 和 OrderDetail。 

实体 类 UserInfo 用 于 封装 客户 信息 ， 代 码 如 下 : 

Package com.ecpbm.pojo; 


public class UserInfo { 
private int id; 
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private String userName; 

private String password; 

private String realName; 

private String sex; 

private String address; 

private String email; 

private String regDate; 

Private int status; 

// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 AdminInfo 用 于 封装 管理 员 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 
import java.util.List; 
public class AdminInfo { 
private int id; 
private String name; 
Private String pwd; 
// 关联 的 属性 
private List<Functions> fs; 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 Functions 用 于 封装 系统 功能 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 
import java.util.Hashset; 
import java.util.Set7 
public class Functions implements Comparable<Functions> { 
private int id; 
private String name; 
private int parentid; 
private boolean isleaf; 
// 关联 的 属性 
private Set ais = new HashSet() 7 
// 省 略 上 述 属性 的 getter 和 setter 方法 
override 
public int compareTo (Functions arg0) { 
return ((Integer) this.getId()) .compareTo((Integer) 
(arg0.getId())) 7 
} 


在 实体 类 Functions 中 , 重 写 了 compareTo(Functions arg0) 方 法 。 该 方法 用 于 在 排序 时 将 
两 个 Functions 对 象 的 id 进行 比较 , 根据 比较 的 结果 是 小 于 、 等 于 或 者 大 于 而 返回 一 个 负数 、 
零 或 者 正 数 。 

实体 类 Powers 用 于 封装 权限 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 


T 


public class Powers { 


private AdminInfo ai; 
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Private Functions f; 

// 省 略 上 述 属性 的 getter 和 setter 方法 
override 

public String toString() { 


return "Powers [ai=" + ai + ", f=" + f+"]"; 


} 
实体 类 ProductInfo 用 于 封装 商品 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 

public class ProductInfo { 
// 商品 基本 信息 (部 分 ) 
private int id; // 商品 编号 
private String code; // 商品 编码 
private String name; // 商品 名 称 
// 关联 属性 
private Type type; // 商品 类 型 
private String brand; // 商品 品牌 
private String pic; // 商品 小 图 
private int num; // 商品 数量 
private double price; // 商品 价格 
private String intro; // 商品 介绍 
private int status; // 商品 状态 
private double priceFrom; 
private double priceTo; 

// 省 略 上 述 属 性 的 getter 和 setter 方法 

} 


实体 类 Type 用 于 封装 商品 类 型 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 

public class Type { 
private int id; // 产品 类 型 编号 
private String name; // 产品 类 型 名 称 
// 省 略 上 述 属性 的 getter 和 setter 方法 

} 


实体 类 OrderInfo 用 于 封装 订单 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 

public class OrderInfo { 
private Integer id; 
private int uid; 
private UserInfo ui; 
private String status; 
private String ordertime; 
private double orderprice; 
private String orderTimeFrom; 
private String orderTimeTo; 


// 省 略 上 述 属性 的 getter 和 sette 方法 
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实体 类 OrderDetail 用 于 封装 订单 明细 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 
Public class OrderDetail { 
private int id; 
private int oid; 
private OrderInfo oi; 
private int pid; 
private ProductInfo pi; 
Private int num; 
private double price; 
private double totalprice; 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


此 外 ， 还 创建 了 三 个 辅助 类 : Pager、SearchProductInfo 和 TreeNode。Pager 类 用 于 封装 
分 页 信息 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 
public class Pager { 
private int curPage;// 待 显示 页 
private int perPageRows;// 每 页 显示 的 记录 数 
Private int rowCount; // 记录 总 数 
private int pageCount; // 总 页 数 
// 省 略 curPage、perPageRows、rowCount 属性 的 getter 和 setter 方法 
// 根据 rowcount 和 perPageRows 计算 总 页 数 
public int getPageCount() { 
return (rowCount + perPageRows - 1) / perPageRows; 


3 
// 分 页 显示 时 ， 获 取 当 前 页 的 第 一 条 记录 的 索引 
public int getFirstLimitParam() { 
return (this.curPage - 1) * this.perPageRows; 
. 
} 


SearchProductInfo 类 用 于 封装 商品 查询 条 件 ， 代 码 如 下 : 


Package com.ecpbm.pojo; 
public class SearchProductInfo { 
// 产品 基本 信息 (部 分 ) 
private int id; // 产品 编号 
private String code; // 产品 编码 
private String name; // 产品 名 称 
private String brand; // 产品 品牌 
private double priceFrom; 
Private double priceTo; 
private int tid; 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


系统 使 用 Easy UI 提供 的 Tree 控件 来 显示 菜单 ，TreeNode 类 用 于 封装 树 形 控件 的 结 点 
信息 ， 代 码 如 下 : 
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Package com.ecpbm.pojo; 
import java.util.List; 
public class TreeNode { 
private int id; // 结 点 id 
private String text; // 结 点 名 称 
private int fid; // 父 结 点 id 
Private List<TreeNode> children; // 包含 的 子 结 点 
// 省 略 上 述 属性 的 getter 和 setter 方法 


19.5 ”创建 几 个 Dao 接口 及 动态 提供 类 


在 com.ecpbm.dao 包 中 ， 创 建 数 据 访 问 层 接口 UserInfoDao 、AdminInfoDao、 
ProductInfoDao、TypeDao、OrderInfoDao、FunctionDao。 在 这 些 Dao 接口 中 , 使 用 MyBatis 
注解 完成 数据 表 的 操作 。 在 接口 UserInfoDao 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.dao; 
import java.util.List; 
import java.util.Map; 
import org.apache.ibatis.annotations.Param; 
import org.apache.ibatis.annotations.Select; 
import org.apache.ibatis.annotations.SelectProvider; 
import org.apache.ibatis.annotations.Update; 
import com.ecpbm.dao.provider.UserIinfoDynaSsqlProvider; 
import com.ecpbm.pojo.UserInfo; 
public interface UserInfoDao { 
// 获取 系统 合法 客户 ， 即 数据 表 user_info 中 status 字段 为 1 的 客户 列表 
@select ("select * from user info where status=1") 
public List<UserInfo> getValidUser (); 
// 根据 客户 ia 号 获取 客户 对 象 
@select ("select * from user info where id=#{id}") 
public UserInfo getUserInfoById(int id) 
// 分 页 获取 客户 信息 
@selectProvider (type = UserInfoDynasqlProvider.class, method = 
"selectwithParam") 
List<UserInfo> selectByPage (Map<String, Object> params); 
// 根据 条 件 查 询 客户 总 数 
@SelectProvider (type = UserIinfoDynaSqlProvider.class, method = "count") 
Integer count (Map<String Object> params); 
// 更 新 客户 状态 
@Update ("update user info set status=#{flag} where id in (${ids})") 
void updateState (@Param("ids") String ids, @Param("flag") int flag); 
} 


在 接口 UserInfoDao 中 ，getValidUser 方法 通过 @Select 注解 映射 一 条 SELECT 语句 ， 
获取 系统 合法 客户 。getUserInfoById 方法 通过 @Select 注解 映射 一 条 SELECT 语句 , 根据 客 
户 id 号 获取 客户 对 象 。selectByPage 方法 通过 人 @SelectProvider 注解 调用 
UserInfoDynaSqlProvider 类 中 的 selectWithParam 方法 获得 一 条 SELECT 语句 ， 分 页 获取 客 
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户 信息 ，Map<String, Object> 类 型 的 参数 params 用 于 封装 查询 条 件 。 接口 UserInfoDao 中 的 
count 方法 通过 @SelectProvider 注解 调用 UserInfoDynaSqlProvider 类 中 的 count 方法 获得 一 
条 SELECT 语句 ， 根 据 条 件 查 询 客户 总 数 ，Map<String，Object> 类 型 的 参数 params 用 于 封 
装 查 询 条 件 。updateState 方法 通过 @Update 注解 映射 一 条 UPDATE 语句 ， 更 新 客户 状态 ， 
并 使 用 @Param 注解 将 前 端 页 面 传递 来 的 参数 ids 和 flag 的 值 分 别 赋值 给 String 类 型 的 变量 
ids 和 int 类 型 的 变量 flag。 

在 com.ecpbm.dao.provider 包 中 ， 创 建 动 态 SQL 提供 类 UserInfoDynaSqlProvider， 并 添 
加 selectWithParam 和 count 两 个 方法 ， 代 码 如 下 : 


Package com.ecpbm.dao.provider; 
import java.util.Map; 
import org.apache.ibatis.jdbc.sQL; 
import com.ecpbm.pojo.UserIinfo; 
public class UserIinfoDynaSsqlProvider { 
// 分 页 动态 查询 
Public String selectWithParam(Map<String, Object> params) { 
String sql = new SQL() { 
| 
SELECT ("*"); 
FROM ("user info"); 
if (params.get ("userInfo") != null) { 
UserInfo userInfo = (UserInfo) params.get ("userInfo"); 
if (userIinfo.getUserName() != null 
&& !userInfo.getUserName () .equals("")) { 
WHERE(" userName LIKE CONCAT 
('%',#{userIinfo.userName},'%') "); 
} 
} 
} 
}.tostring(); 
if (params.get ("pager") != null) { 
sql += " limit #{pager.firstLimitParam} , #{pager.perPageRows} 


} 


return sql; 


} 
// 根据 条 件 动态 查询 总 记录 数 
public String count (Map<String, Object> params) { 
return new SOL() { 
{ 
SELECT ("count (*)"); 
FROM ("user info"); 
if (params.get ("userInfo") != null) { 
UserInfo userInfo = (UserInfo) params.get ("userIinfo"); 
if (userIinfo.getUserName() != null 
&& luserIinfo.getUserName() .equals("")) { 
WHERE ("” userName LIKE CONCAT 
('%$',#{userIinfo.userName}, '$') "); 


Spring + Spring MVC + MyBatis 竺 
框架 技术 精 讲 与 整合 案例 一 -一 


} 
.toString()7 


} 
在 接口 AdminInfoDao 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.dao; 
import org.apache.ibatis.annotations.Many; 
import org.apache.ibatis.annotations.Result; 
import org.apache.ibatis.annotations.Results; 
import org.apache.ibatis.annotations.Select; 
import org.apache.ibatis.mapping.FetchType; 
import com.ecpbm.pojo.AdminInfo; 
public interface AdminInfoDao { 
// 根据 登录 名 和 密码 查询 管理 员 
@Sselect ("select * from admin info where name = #{name} and pwd = #{pwd}") 
public AdminInfo selectByNameAndPwd (AdminInfo ai); 
// 根据 管理 员 id 获取 管理 员 对 象 及 关联 的 功能 集合 
Q@Sselect ("select * from admin info where id = #{id}" 
@Results({ @Result(id = true, column = "id", property = "id")， 
@Result (column = "name", property = "name"), 

@Result (column = "pwd", property = "pwd"), 

@Result (column = "id", property = "fs", many = @Many(select = 
"com.ecpbm.dao.FunctionDao.selectByAdminId", fetchType = 
FetchType.EAGER)) }) 

RdminInfo selectById(Integer id); 


} 


在 接口 AdminInfoDao 中 ，selectByNameAndPwd 方法 通过 @Select 注解 映射 一 条 
SELECT 语句 , 根据 登录 名 和 密码 查询 管理 员 , AdminInfo 类 型 的 参数 ai 用 于 封装 查询 条 件 。 
selectById 方法 通过 @Select 注解 映射 一 条 SELECT 语句 ， 根 据 管理 员 id 获取 管理 员 对 象 及 
关联 的 功能 集合 ， 并 通过 @Results 注解 映射 查询 结果 。 

在 接口 ProductInfoDao 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.dao; 

import java.util.List; 

import java.util.Map; 

import org.apache.ibatis.annotations.*; 

import org.apache.ibatis.mapping.FetchType; 

import com.ecpbm.dao.provider.ProductIinfoDynaSsqlProvider; 
import com.ecpbm.pojo.ProductInfo; 

public interface ProductIinfoDao { 


// 分 页 获取 商品 


@Results({ @Result (id = true, column = "id", property = "id"), 
@Result (column = "code", property = "code"), 
@Result (column = "name", property = "name"), 
@Result (column = "brand", property = "brand"), 
@Result (column = "pic", property = "pic"), 
@Result (column = "num", property = "num"), 
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@Result (column = "price", property = "price")， 


@Result (column = "intro", property = "intro"), 
@Result (column = "status", property = "status"), 
@Result (column = "tid", property = "type", one = Qone (select = 


"com.ecpbm.dao.TypeDao.selectById", fetchType = FetchType.EAGER)) }) 

@SelectProvider (type = ProductIinfoDynaSqlProvider.class, 
method = "selectWithParam") 

List<ProductIinfo> selectByPage (Map<String, Object> params); 

// 根据 条 件 查 询 商 品 总 数 

@SelectProvider (type = ProductInfoDynaSqlProvider.class, method = 
"count") 

Integer count (Map<String, Object> params); 

// 添加 商品 

@Insert ("insert into product info(code,name,tid,brand,pic, 
num,price,intro,status) " 

+ "values (#{code},#{name},#{type.id},#{brand},#{pic}, 

#{num},#{price},#{intro},#{status})") 

options (useGeneratedKeys = true, keyProperty = "id") 

void save (ProductInfo pi); 

// 修改 商品 

@Update ("update product info set 
code=#{code},name=#{name},tid=#{type.id}," + 
"brand=#{brand} ,pic=#{pic},num=#{num},price=#{price},intro=#{intro}," + 
"status=#{status} where id=#{id}") 

void edit (ProductInfo pi); 

// 更 新 商品 状态 

@Update ("update product info set status=#{flag} where id in (${ids})") 

void updatestate (@Param("ids") String ids, @Param("flag") int flag); 

// 获取 在 售 商品 列表 

@select ("select * from product info where status=1") 

List<ProductInfo> getOonSaleProduct (); 

// 根据 商品 id 获取 商品 对 象 

select ("select * from product info where id=#{id}") 

ProductInfo getProductInfoById (int id) 
} 


在 接口 ProductInfoDao 中 ，selectByPage 方法 通过 @SelectProvider 注解 调用 
ProductInfoDynaSqlProvider 类 中 的 selectWithParam 方法 获得 一 条 SELECT 语句 ， 分 页 获取 
商品 信息 ，Map<String，Object> 类 型 的 参数 params 用 于 封装 查询 条 件 ， 并 通过 @Results 注 
解 映射 查询 结果 。count 方法 通过 @SelectProvider 注解 调用 ProductmfoDynaSqlProvider 类 中 
的 count 方法 获得 一 条 SELECT 语句 ， 根 据 条 件 查询 商品 总 数 ，Map<String, Object> 类 型 的 
参数 params 用 于 封装 查询 条 件 。save 方法 通过 @Insert 注解 映射 一 条 INSERT 语句 , 添加 商 
品 。edit 方法 通过 @Update 注解 映射 一 条 UPDATE 语句 ， 修 改 商 品 。updateState 方法 通过 
@Update 注解 映射 一 条 UPDATE 语句 ， 更 新 商品 状态 。getOnSaleProduct 方法 通过 @Select 
注解 映射 一 条 SELECT 语句 ， 获 取 在 售 商品 列表 。getProductinfoById 方法 通过 @Select 注 
解 映射 一 条 SELECT 语句 ， 根 据 商品 id 获取 商品 对 象 。 

在 com.ecpbm.dao.provider 包 中 , 创建 动态 SQL 提供 类 ProductInfoDynaSqlProvider, 并 
添加 selectWithParam 和 count 两 个 方法 ， 代 码 如 下 : 
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Package com.ecpbm.dao.provider; 
import java.util.Map; 
import org.apache.ibatis.jdbc.sQL; 
import com.ecpbm.pojo.ProductInfo; 
public class ProductIinfoDynaSqlProvider { 
// 分 页 动态 查询 
public String selectWithParam(Map<String, Object> params) { 
String sql = new SQL() { 
{ 
SELECT ("*") 7 
FROM ("product_info")7 
if (Params.get("productInfo") != null) { 
ProductInfo ProductInfo = (ProductInfo) params.get 
("productInfo") 7 


if (ProductInfo.getcode () != null && !"".equals 


(ProductInfo.getcode ())) { 
WHERE ("” code = #{productInfo.code} ") 7 
} 
if (ProductInfo.getName () != null && !productInfo. 
getName() .equals ("")) { 
WHERE (" name LIKE CONCRT ('%',# 
{productInfo.name},'%') "); 
} 
if (ProductInfo.getBrand() != null && !productInfo. 
getBrand() .equals("")) { 
WHERE(" brand LIKE CONCAT ('%',#{productInfo. 
brand}s "Sy ys 
} 
if (productIinfo.getType() != null && productInfo. 
getType().getId() > 0) { 
WHERE (" tid = #{productIinfo.type.id} "); 
} 
if (ProductInfo.getPriceFrom() > 0) { 
WHERE (" price > #{productInfo.priceFrom} "); 
} 
if (productIinfo.getPriceTo() > 0) { 
WHERE (" price <= #{productIinfo.priceTo} "); 


二 
} .toString() 7 
if (params.get ("pager") != null) { 


sql += " limit #{pager.firstLimitParam} , #{pager.perPageRows} "; 


} 


return sql; 


¥ 
// 根据 条 件 动态 查询 商品 总 记录 数 
public String count (Map<String, Object> params) { 
return new SQL() { 
a 
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SELECT ("count (*})")? 
FROM ("product info"); 
if (Params .get ("productInfo") != null) { 
ProductInfo productInfo = (ProductInfo) params.get 
("productInfo"); 
if (productIinfo.getCode() != null && !"".equals 
(productInfo.getCode())) { 
WHERE ("” code = #{productInfo.code} "); 
} 
if (ProductInfo.getName () != null && !productInfo. 
getName () .equals("")) { 
WHERE(" name LIKE CONCAT ('%',#{productInfo. 
name},'%') "™); 
} 
if (ProductInfo.getBrand() != null && !productInfo. 


本 
WHERE(" brand LIKE CONCAT ('%',#{productInfo. 


getBrand() .equals( 


brand}, '%') ") 7 
} 
IE (ProductInfo.getType() != null && productInfo. 
getType().getId() > 0) { 
WHERE (" tid = #{productInfo.type.id} "); 
} 
if (productIinfo.getPriceFrom() > 0) { 
WHERE (" price > #{productIinfo.priceFrom} "); 
} 
if (ProductInfo.getPriceTo() > 0) { 
WHERE (" price <= #{productIinfo.priceTo} "); 


} 
}.tostring(); 


} 
在 接口 TypeDao 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.dao; 
import java.util.List; 
import org.apache.ibatis.annotations.Insert; 
import org.apache.ibatis.annotations.Options; 
import org.apache.ibatis.annotations.Select; 
import org.apache.ibatis.annotations.Update; 
import com.ecpbm.pojo.Type; 
public interface TypeDao { 

// 查询 所 有 商品 类 型 

@select ("select * from type") 

public List<Type> selectAll(); 

// 根据 类 型 编号 查询 商品 类 型 


@select ("select * from type where id = #{id}") 


Type selectById(int id); 
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// 添加 商品 类 型 
@Insert ("insert into type (name) values (#{name})") 
QQoptions (useGeneratedKeys = true, keyProperty = "id") 


public int add(Type type); 
// 更 新 商品 类 型 
@Update ("update type set name = #{name} where id = #{id}") 
public int update (Type type); 
} 


在 接口 TypeDao 中 ,selectAll 方法 通过 @Select 注解 映射 一 条 SELECT 语句 , 查询 所 有 
商品 类 型 。selectById 方法 通过 @Select 注解 映射 一 条 SELECT 语句 ， 根 据 类 型 编号 查询 商 
品类 型 对 象 。add 方法 通过 @Insert 注解 映射 一 条 INSERT 语句 ， 添 加 商品 类 型 。update 方 
法 通过 @Update 注解 映射 一 条 UPDATE 语句 ， 更 新 商品 类 型 。 

在 接口 OrderInfoDao 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.dao; 
import java.util.List; 
import java.util.Map; 
import org.apache.ibatis.annotations.*; 
import org.apache.ibatis.mapping.FetchType; 
import com.ecpbm.dao.provider.OrderIinfoDynaSqlProvider; 
import com.ecpbm.pojo.OrderDetail; 
import com.ecpbm.pojo.OrderIinfo; 
public interface OrderInfoDao { 

// 分 页 获取 订单 信息 

@Results({ 

@Result (column = "uid", property = "ui", one = @One(select = 
"com.ecpbm.dao.UserIinfoDao.getUserInfoById", fetchType = 
FetchType.EAGER)) }) 

QSelectProvider (type = OrderIinfoDynaSqlProvider.class, method = 
"selectWithParam" ) 

List<OrderInfo> selectByPage (Map<String, Object> params); 

// 根据 条 件 查 询 订单 总 数 

QSelectProvider (type = OrderInfoDynaSqlProvider.class, method = 
"count") 

Integer count (Map<String, Object> params); 

// 保存 订单 主 表 信 息 

@Insert ("insert into order infol(uid,status,ordertime,orderprice) "+ 
"values (#{uid},#{status},#{ordertime},#{orderprice})") 

@Options (useGeneratedKeys = true, keyProperty = "id") 

int saveOrderInfo (OrderInfo oi); 

// 保存 订单 明细 

@Insert ("insert into order detail (oid,pid,num) 
values (#{0oid},#{pid},#{num})") 

@Options (useGeneratedKeys = true, keyProperty = "id") 


int saveOrderDetail (OrderDetail od); 


// 根据 订单 编号 获取 订单 对 象 
@Results ({ 
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@Result (column = "uid", property = "ui", one = one(select = 
"com.ecpbm.dao.UserIinfoDao.getUserIinfoById", fetchType = 
FetchType .EAGER)) }) 

Q@Select ("select * from order info where id = #{id}") 
public OrderInfo getOrderIinfoById (int id); 

// 根据 订单 编号 获取 订单 明细 

@Results ({ 

@Result (column = "pid", property = "pi", one = Qone (select 
"com.ecpbm.dao.ProductIinfoDao.getProductIinfoById", fetchType = 
FetchType.EAGER)) }) 

@Sselect ("select * from order detail where oid = #{0id}") 
public List<OrderDetail> getOrderDetailByOid(int oid); 
// 根据 订单 编号 删除 订单 主 表 记 录 

@Delete ("delete from order info where id=#{id}") 

public int deleteOrderInfol(int id); 

// 根据 订单 编号 删除 订单 明细 记录 

@Delete ("delete from order detail where oid=#{id}") 
public int deleteOrderDetail (int id); 


} 


在 接口 OrderInfoDao 中 ，selectByPage 方法 通过 @SelectProvider 注解 调用 
OrderInfoDynaSqlProvider 类 中 的 selectWithParam 方法 获得 一 条 SELECT 语句 , 分 页 获取 订 
单 信息 ，Map<String，Object> 类 型 的 参数 params 用 于 封装 查询 条 件 ， 并 通过 @Results 注解 
映射 查询 结果 。count 方法 通过 @SelectProvider 注解 调用 OrderInfoDynaSqlProvider 类 中 的 
count 方法 获得 一 条 SELECT 语句 ， 根 据 条 件 查询 订单 总 数 ，Map<String，Object> 类 型 的 参 
数 params 用 于 封装 查询 条 件 。saveOrderInfo 方法 通过 @Insert 注解 映射 一 条 INSERT 语句 
保存 订单 主 表 信息 。saveOrderDetail 方法 通过 @Insert 注解 映射 一 条 INSERT 语句 ， 保 存 订 
单 明细 。getOrderInfoById 方法 通过 @Select 注解 映射 一 条 SELECT 语句 ， 根 据 订单 编号 获 
取 订 单 对 象 ， 并 通过 @Results 注解 映射 查询 结果 。getOrderDetailByOid 方法 通过 @Select 注 
解 映射 一 条 SELECT 语句 ， 根 据 订 单 编 号 获取 订单 明细 ， 并 通过 @Results 注解 映射 查询 结 
果 。deleteOrderInfo 方法 通过 @Delete 注解 映射 一 条 DELETE 语句 ,根据 订单 编号 删除 订单 
主 表 记 录 。deleteOrderDetail 方法 通过 @Delete 注解 映射 一 条 DELETE 语句 ， 根 据 订 单 编号 
删除 订单 明细 记录 。 

在 com.ecpbm.dao.provider 包 中 ， 创 建 动态 SQL 提供 类 OrderInfoDynaSqlProvider， 并 
添加 selectWithParam 和 count 两 个 方法 ， 代 码 如 下 : 

Package com.ecpbm.dao.provider; 

import java.util.Map; 

import org.apache.ibatis.jdbc.sQL; 


import com.ecpbm.pojo.OrderIinfo; 
public class OrderIinfoDynaSqlProvider { 
// 分 页 动态 查询 
public String selectWithParam(Map<String, Object> params) { 
String sql = new SQL() { 
i 
SELECT ("*"); 
FROM ("order info™"); 
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if (Params .get ("orderInfo") != null) { 


OrderInfo orderInfo = (OrderInfo) 
params .get ("orderInfo")7 


if (orderIinfo.getId() != null && orderIinfo.getId() > 0) 


WHERE (" id = #{orderIinfo.id} ") 7 
} else { 
if (orderInfo .getStatus () !=null && 1" 请 选择 " .equals 
(orderIinfo.getstatus())) { 
WHERE(" status = #{orderIinfo.status} "); 
} 
if (orderIinfo.getOrderTimeFrom() != null 
.equals (orderInfo.getOrderTimeFrom())) { 
WHERE (" ordertime >= #{orderInfo.orderTimeFrom} "); 


} 
if (orderIinfo.getOrderTimeTo() != null 
&& !"".equals (orderIinfo.getOrderTimeTo())) { 
WHERE (" ordertime < #{forderInfo.orderTimeTol "); 
} 
if (orderInfo.getUid() > 0) { 
WHERE (" uid = #{orderIinfo.uid} "); 


} 
}.tostring(); 
if (params.get ("pager") != null) { 
sql +=" limit #{pager.firstLimitParam} , #{pager.perPageRows} "; 


} 


return sql; 


// 根据 条 件 动态 查询 订单 总 记录 数 
public String count (Map<String, Object> params) { 
return new SOL() { 
{ 
SELECT ("count (*)"); 
FROM ("order info"); 
if (params.get ("orderInfo") null) { 
OrderInfo orderInfo = (OrderInfo) 
params.get ("orderInfo"); 
if (orderInfo.getId() 


null && orderInfo.getId() > 0) 


WHERE (" id = #{orderIinfo.id} "); 
} else { 

if (orderInfo .getStatus () !=null && !1" 请 选择 " .equals 

(orderInfo.getstatus())) { 
WHERE(" status = #{orderIinfo.status} "); 

} 

if (orderIinfo.getOrderTimeFrom() != null 
&& !l"".equals (orderIinfo.getOrderTimeFrom())) { 


WHERE (" ordertime >= #{orderInfo.orderTimeFrom} "); 


< a 
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if (orderIinfo.getOorderTimeTo() != null 
&& !I"".equals (orderIinfo.getOrderTimeTo())) { 
WHERE (" ordertime < #{orderIinfo.orderTimeTo} "); 


¥ 
if (orderInfo.-getUid() > 0) { 
WHERE (" uid = #{orderIinfo.uid} "); 


} 
}.tostring(); 


} 
在 接口 FunctionDao 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.dao; 
import java.util.List; 
import org.apache.ibatis.annotations.Select; 
import com.ecpbm.pojo.Functions; 
public interface FunctionDao { 
// 根据 管理 员 id 获取 功能 权限 
QSelect ("select * from functions where id in (select fid from powers where 
aid = #{aid} )") 
Public List<Functions> selectByAdminId (Integer aid); 
} 


在 接口 FunctionDao 中 , selectByAdminId 方法 通过 @Select 注 解 映射 一 个 SELECT 语句 ， 
根据 管理 员 id 获取 功能 权限 。 


19.6 创建 Service 接口 及 实现 类 


在 com.ecpbm.service 包 中 ， 创 建 业务 逻辑 层 接口 UserInfoService、AdminInfoService、 
ProductInfoService、TypeService 和 OrderInfoService。 
在 接口 UserInfoService 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service; 

import java.util.List; 

import java.util.Map; 

import com.ecpbm.pojo.Pager; 

import com.ecpbm.pojo.UserIinfo; 

public interface UserInfoService { 
// 获取 合法 客户 
public List<UserInfo> getValidUser (); 
// 根据 客户 编号 查询 客户 
public UserInfo getUserInfoById (int id); 
// 分 页 显示 客户 


List<UserInfo> findUserInfo(UserInfo userInfo, Pager pager); 
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<… 


// 客户 计数 
Integer count (Map<String, Object> params); 
// 修改 指定 编号 的 用 户 状态 
void modifyStatus (String ids, int flag); 
} 


在 接口 AdminInfoService 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service; 
import com.ecpbm.pojo.AdminIinfo; 
public interface AdminInfoService { 
// 登录 验证 
Public AdminInfo login (AdminInfo ai) 7 
// 根据 管理 员 编号 ， 获 取 管理 员 对 象 及 关联 的 功能 权限 


Public AdqminInfo getAdminInfoAndFunctions (Integer id) 7 
} 


在 接口 ProductInfoService 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service; 

import java.util.List; 

import java.util.Map; 

import com.ecpbm.pojo.Pager; 

import com.ecpbm.pojo.ProductInfo; 
public interface ProductInfoService { 


// 分 页 显示 商品 


List<ProductInfo> findProductInfo (ProductInfo productInfo, Pager pager); 


// 商品 计数 
Integer count (Map<String, Object> params); 


// 添加 商品 


Public void addProductInfo (ProductInfo pi); 


// 修改 商品 


public void modifyProductInfo (ProdquctInfo pi); 


// 更 新 商品 状态 


void modifystatus (String ids, int flag) 


// 获取 在 售 商品 列表 


List<ProductInfo> getOonSaleProduct () 


// 根据 商品 id 获取 商品 对 象 


ProductInfo getProductInfoById (int id) 
} 


在 接口 TypeService 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service; 
import java.util.List; 
import com.ecpbm.pojo.Type; 
public interface TypeService { 
// 获取 所 有 商品 类 型 
public List<Type> getAll(); 
// 添加 商品 类 型 
public int addType (Type type); 
// 更 新 商品 类 型 
public void updateType (Type type); 
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在 接口 OrderInfoService 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service; 
import java.util.List; 
import java.util.Map; 
import com.ecpbm.pojo.*; 
public interface OrderInfoService { 
// 分 页 显示 订单 
List<OrderInfo> findorderInfo (OrderInfo orderIinfo, Pager pager); 
// 订单 计数 
Integer count (Map<String, Object> Params) 7 
// 添加 订单 主 表 
public int addorderInfo (OrderInfo oi); 
// 添加 订单 明细 
Public int addorderDetail (OrderDetail od); 
// 根据 订单 编号 获取 订单 信息 
public OrderInfo getOrderInfoById (int id); 
// 根据 订单 编号 获取 订单 明细 信息 
Public List<OrderDetail> getOrderDetailByOid(int oid); 
// 删除 订单 
public int deleteOrder (int id); 


} 


接 下 来 ， 在 com.ecpbm.service.impl 包 中 ， 创 建 上 述 接口 的 实现 类 UserInfoServiceImpl、 
AdminInfoServiceImpl、ProductInfoServiceImpl、TypeServiceImpl 和 OrderInfoServiceImpl， 
实现 接口 中 的 方法 。 

在 实现 类 UserInfoServiceImpl 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service.impl; 


Q@Service ("userInfoService") 
@Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class UserInfoServiceImpl implements UserInfoService { 
@Autowired 
UserInfoDao userIinfoDao; 
@Override 
public List<UserInfo> getValidUser() { 
return userInfoDao.getValidUser (); 
} 
@oOverride 
public UserInfo getUserInfoById(int id) { 
return userInfoDao.getUserInfoById(id); 
} 
override 
public List<UserInfo> findUserInfo (UserInfo userIinfo, Pager pager) { 
Map<string, Object> params = new HashMap<string, Object>(); 
params.put ("userIinfo", userInfo); 
int recordCount = UserInfoDao-count (params); 


pager.setRowCount (recordCount); 
if (recordCount > 0) { 
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params.put ("pager", pager); 
} 


return UserInfoDao .selectBYPage (params); 


} 

@oOverride 

public Integer count (Map<String, Object> params) { 
return userIinfoDao.count (params); 


ee 
public void modifyStatus (String ids, int flag) { 
userInfoDao.updatestate (ids, flag); 
i 
} 
在 实现 类 UserInfoServiceImpl 中 ， 将 @Transactional 注解 标注 在 UserInfoServiceImpl 类 
前 ， 将 类 中 的 所 有 方法 都 进行 事务 处 理 。@Transactional 注解 的 Propagation 属性 用 于 指定 
事务 传播 行为 ，Propagation.REQUIRED 表示 如 果 有 事务 ， 那 么 加 入 事务 ， 没 有 事务 则 新 建 
一 个 事务 ; PropagationNOT_ SUPPORTED 表示 容器 不 为 方法 开启 事务 ; PropagationREQUIRES NEW 
表示 不 管 是 否 存在 事务 ， 都 会 创建 一 个 新 的 事务 ， 将 原来 的 事务 挂 起 ， 当 新 的 事务 执行 完 
毕 后 , 再 继续 执行 原来 的 事务 ; Propagation.MANDATORY 表示 必须 在 一 个 已 有 的 事务 中 执 
行 , 否则 抛 出 异常 ; Propagation.NEVER 表示 必须 在 一 个 没有 的 事务 中 执行 , 否则 抛 出 异常 ; 
Propagation.SUPPORTS 表示 如 果 其 他 Bean 调用 这 个 方法 ， 在 其 他 Bean 中 声明 事务 ， 那 就 
用 事务 ， 如 果 其 他 Bean 没有 声明 事务 ， 那 就 不 用 事务 ; 默认 时 ，Propagation 属性 为 
Propagation.REQUIRED isolation 属性 用 于 指定 事务 隔离 级 别 , IsolationREAD_ UNCOMMITTED 
表示 读 取 未 提交 数据 ， 由 于 会 出 现 脏 读 且 不 可 重复 读 ， 基 本 不 使 用 ; Isolation.READ_ 
COMMITTED 表示 读 取 已 提交 数据 , 但 会 出 现 不 可 重复 读 和 幻 读 ; Isolation.REPEATABLE_ 
READ 表示 可 重复 读 , 但 会 出 现 幻 读 ; Isolation.SERIALIZABLE 表示 串 行 化 ; Isolation DEFAULT 
表示 使 用 数据 库 默认 的 隔离 级 别 ， 一 般 情况 使 用 这 种 配置 。 
在 实现 类 AdminInfoServiceImpl 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service.impl; 


@Sservice ("adminIinfoService") 
@Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class AdminInfoServiceImpl implements AdminInfoService { 
@Autowired 
private AdminInfoDao adminInfoDao; 
Qoverride 
public AdminInfo login (AdminInfo ai) { 
return adminInfoDao.selectByNameAndPwd (ai) 7 
override 
public AdminInfo getAdminInfoAndFunctions(Integer id) { 
return adminInfoDao.selectById(id); 
} 


< SS 
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实现 类 AdminInfoServiceImpl 中 的 方法 并 没有 实现 其 他 功能 ， 而 是 直接 调用 
AdminInfoDao 接口 提供 的 方法 。 
在 实现 类 ProductInfoServiceImpl 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service.impl; 


Q@Service ("productInfoService") 
QTransactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
Public class ProductIinfoServiceImpl implements ProductInfoService { 
@Autowired 
ProductIinfoDao productIinfoDao; 
Qoverride 
public List<ProductInfo> findProductInfo (ProductInfo productInfo, Pager pager) { 
// 创建 对 象 params 
Map<Sstring, Object> params = new HashMap<Sstring, Object>(); 
// 将 封装 有 查询 条 件 的 productInfo 对 象 放 入 params 
params.put ("productInfo", productInfo); 
// 根据 条 件 计算 商品 总 数 
int recordCount = productIinfoDao.count (params); 
// 给 pager 对 象 设置 rowcount 属性 值 (记录 总 数 ) 
pager.setRowCount (recordCount); 
if (recordCount > 0) { 
// 将 page 对 象 放 入 params 


params.put ("pager", pager); 


} 
// 分 页 获取 商品 信息 
return productIinfoDao.selectByPage (params); 

3 

@Ooverride 

public Integer count (Map<String, Object> params) { 
return productIinfoDao.count (params); 

’ 

@Ooverride 

public void addProductInfo (ProductInfo pi) { 
productIinfoDao.save (pi); 

@Override 

public void modifyProductInfo (ProductInfo pi) { 
productInfoDao .edit (Pi) 7 

Qoverride 

public void modifyStatus (String ids, int flag) 1{ 
productInfoDao .updateState (ids, flag); 

QQoverride 

public List<ProductInfo> getonSaleProduct () { 
return productIinfoDao.getOonsaleProduct (); 


» 


@oOverride 
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public ProquctInfo getProductInfoByYyId (int id) { 
return productInfoDao.getProductInfoById(id) 7 


和 

在 实体 类 ProductInfoServiceImpl 中 ,findProductInfo 方 法 有 两 个 参数 ,一 个 是 ProductInfo 
类 型 的 参数 productInfo， 用 于 封装 前 端 页 面 传递 来 的 查询 条 件 ; 另 一 个 是 Pager 类 型 的 参 
数 pager， 用 于 封装 从 前 端 页 面 传递 来 的 页 码 和 每 页 记录 数 。 在 findProductInfo 方法 中 ， 创 
建 了 一 个 Map<String， Object> 类 型 的 对 象 params， 用 来 存放 两 个 对 象 ， 一 个 是 productInfo 
对 象 ， 另 一 个 是 pager 对 象 。 对 于 pager 对 象 来 说 ， 放 入 params 前 ， 还 需 设 置 pager 对 象 的 
IowCount 属性 值 , 这 个 值 是 通过 调用 ProductInfoDao 接口 的 count 方法 获得 的 。 设 置 好 params 
对 象 后 ， 再 调用 ProductInfoDao 接口 的 selectByPage 方法 获得 当前 页 的 商品 列表 。 实 体 类 
ProductInfoServiceImpl 中 其 他 方法 的 实现 比较 简单 , 直接 调用 ProductInfoDao 接口 提供 的 
方法 。 

在 实现 类 TypeServiceImpl 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service.impl; 


Q@Service ("tYypeService") 
Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class TypeServiceImpl implements TypeService { 
@Autowired 
Private TypeDao typeDao; 
@override 
public List<Type> getAl1l1() { 
return typeDao.selectAll (); 
} 
@Override 
public int addType (Type type) { 
return typeDao.add (type) 
} 
@Override 
public void updateType (Type type) { 
typeDao.update (type); 
} 


实体 类 TypeServiceImpl 中 的 方法 都 是 直接 调用 TypeDao 接口 提供 的 方法 。 
在 实现 类 OrderInfoServiceImpl 中 ， 编 写 如 下 代码 : 


Package com.ecpbm.service.impl; 


QService ("orderInfoService") 
Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class OrderIinfoServiceImpl implements OrderInfoService { 
@Autowired 
OrderInfoDao orderInfoDao; 
@oOverride 


< EP 
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public List<OrderInfo> findOorderInfo (OrderInfo orderInfo, Pager pager) { 
Map<Sstring, Object> params = new HashMap<string, Object>(); 
params.put ("orderIinfo", orderInfo); 
int recordCount = orderIinfoDao.count (params); 
pager.setRowCount (recordCount); 
if (recordCount > 0) { 
params.put ("pager", pager); 
} 
return orderIinfoDao.selectByPage (params); 
’ 
QQoverride 
public Integer count (Map<String, Object> params) { 
return orderInfoDao.count (params); 
} 
Qoverride 
public int addorderInfo (OrderInfo oi) { 
return orderInfoDao.saveOrderInfo (oi); 
} 
@Ooverride 
public int addorderDetail (OrderDetail od) { 
return orderInfoDao.saveOrderDetail (od); 
} 
@override 
public OrderInfo getOrderInfoById(int id) { 
return orderIinfoDao.getOrderIinfoById (id); 
} 
@Ooverride 
public List<OrderDetail> getOrderDetailByOidl(int oid) { 
return orderIinfoDao.getOrderDetailBy0id(oid); 
» 
@Override 
public int deleteOrder (int id) { 
int result = 1; 
try { 
orderIinfoDao.deleteOrderDetail (id); 
orderInfoDao.deleteOrderInfo (id); 
} catch (Exception e) { 
result = 0; 
} 


return result; 


} 


OrderInfoServiceImpl 类 中 的 findOrderInfo 方法 与 ProductInfoServiceIlmpl 类 中 
findProductInfo 方法 的 实现 思路 类 似 。 


19.7 后 台 登 录 与 管理 首页 面 


系统 后 台 登 录 页 为 admin login.jsp， 页 面 效 果 如 图 19-5 所 示 。 
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19-5 后台 登录 页 


在 admin login.jsp 页 面 中 ， 使 用 了 Easy UI 框架 进行 布局 ， 代 码 如 下 : 


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<html> 
<head> 
<title> 电 子 商务 平台 一 后 台 登 录 页 </title> 
<!-- 引入 EasyUI 的 相关 css 和 js 文件 --> 
<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" 

type="text/css" /> 
<link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 
<link href="EasyUI/demo.css" rel="stylesheet" type="text/css" /> 
<script src="EasyUI/jquery.min.js" type="text/javascript"></script> 
<script src="EasyUI/jquery.easyui.min.js" 
type="text/javascript"></script> 
<script src="EasyUI/easyui-lang-zh CN.js" 
type="text/javascript"></script> 
</head> 
<body> 

<script type="text/javascript"> 

function clearForm() { 
$('#adminLoginForm') .form('clear'); 


3 
function checkAdminLogin() { 
$("#adminLoginForm") .form("submit", { 
// 向 控制 器 类 AdminInfocontroller 中 的 1ogin 方法 发 送 请 求 
url : 'admininfo/login', 
success : function(result) { 
var result = eval('(' + result + ')'); 


if (result.success == 'true') { 
window.location.href = 'admin.jsp'7 
$("#adminLoginDlg") .dialog ("close"); 
} else { 


$.messager.show ({ 
title : "提示 信息 "， 
msg : result.message 


</script> 
<div id="adminLoginDlg" class="easyui-dialog" 
style="left: 550px; top: 200px;width: 300;height: 200" 
data-options="title:' 后 台 登 录 ', buttons:'#bb',modal:true"> 
<form id="adminLoginForm" method="post"> 
<table style="margin:20px;font-size: 13;"> 
<tr> 
<th > 用 户 名 </th> 
<td><input class="easyui-textbox" type="text" id="name" 
name="name" data-options="required:true" value="admin"></input></td> 
</tr> 
<tr> 
<th> 密 码 </th> 
<td><input class="easyui-textbox" type="text" id="pwd" 
name="pwd" data-options="required:true" value="123456"></input></td> 
</tr> 
</table> 
</form> 
</div> 
<div id="bb"> 
<a href="javascript:void(0)" class="easyui-linkbutton" 
onclick="checkadminLogin () "> 登录 </a> <a 
href="javascript:void(0)" class="easyui-linkbutton" 
onclick="clearForm() ;"> 重 置 </a> 
</div> 
</body> 
</html> 


为 了 使 用 Easy UI 框架 ， 在 页 面 开始 部 分 的 <head></head> 标 签 中 ， 需 要 引入 Easy UI 
的 相关 css 和 js 文件 。 在 一 个 id 为 adminLoginDlg 的 <div> 标 签 中 ， 将 class 属性 设置 为 
easyui-dialog， 从 而 使 用 Easy UI 对 话 框 控件 Dialog 将 这 个 <div> 标 签 创 建 为 一 个 对 话 框 。 在 
这 个 对 话 框 中 ， 包 含 id 为 adminLoginForm 的 登录 表单 ， 表 单 中 使 用 Easy UI 文本 框 控件 
TextBox 创建 用 户 名 和 密码 两 个 文本 域 。 在 id 为 bb 的 <div> 标 签 中 ， 定 义 两 个 <a> 标 签 ， 将 
它们 的 class 属性 都 设置 为 easyui-linkbutton， 从 而 使 用 Easy UI 的 链接 按钮 控件 LinkButton 
将 这 两 个 <a> 标 签 创建 为 登录 和 重 置 两 个 按钮 。 

在 后 台 登 录 表 单 中 输入 用 户 名 和 密码 ， 单 击 登 录 按钮 ， 执 行 JavaScript 函数 
checkAdminLogin。 在 函数 checkAdminLogin 中 ,通过 jQuery 向 后 台 服 务 器 发 送 请 求 ， 请 求 
的 地 址 为 adminlogin, 这 个 url 请 求 将 映射 到 控制 器 类 AdminInfoController 中 的 login 方法 ; 
success 参数 的 类 型 为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 
函数 的 参数 result， 然 后 判断 result 参数 中 success 名 称 所 对 应 的 值 是 否 等 于 tue， 如 果 等 于 
true， 表 示 登 录 成 功 ， 则 打开 后 台 管 理 首页 面 admin.jsp， 并 关闭 后 台 登 录 表 单 对 话 框 :否则 
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通过 消息 框 给 出 错误 提示 。 
在 控制 类 AdminInfoController 中 ，login 方法 代码 如 下 : 


package com.ecpbm.controller; 


@SessionAttributes(value = { "admin" }) 
Q@Controller 
@RequestMapping ("/admininfo") 
public class AdminInfoController { 
@Autowired 
Private AdminInfoService adminInfoService; 
@RequestMapping (value = "/login", produces = "text/html;charset=UTF-8") 
@ResponseBody 
Public String login (RdaminInfo ai, ModelMap model) { 
// 后 台 登 录 验 证 
RdminInfo admininfo = adminInfoService.login(ai); 
if (admininfo != null && admininfo.getName() != null) { 
// 验证 通过 后 ， 再 判断 是 否 已 为 该 管理 员 分 配 功 能 权限 
if (adminInfoService.getRadminInfoandFunctions ( 
admininfo.getId()) .getFs().size() > 0) { 
// 验证 通过 且 已 分 配 功能 权限 ， 则 将 admininfo 对 象 存 入 model 中 
model.put ("admin", admininfo); 
// 以 JSoN 格式 向 页 面 发 送 成 功 信息 
return "{\"success\":\"true\", \"message\":\" 登 录 成 功 \"}"; 
} else { 
return "{\"success\":\"false\", \"message\":\" 您 没 权 限 ， 请 
联系 超级 管理 员 设置 权限 ! \"}"; 
} 
} else 
return "{\"success\":\"false\", \"message\":\" 登 录 失 败 \"}"; 


} 


在 AdminInfoController 类 中 ， 通 过 @Controller 注解 指示 该 类 是 一 个 控制 器 ， 通 过 
@RequestMapping 注解 将 用 户 对 admin/login 这 个 url 的 请 求 映 射 到 login 方法 。 

login 方法 包含 两 个 参数 ， 一 个 是 AdminInfo 类 型 的 参数 ai， 用 于 封装 从 前 端 登录 表单 
传递 来 的 用 户 名 和 密码 ; 另 一 个 是 ModelMap 类 型 的 参数 model,， 用 于 存放 登录 成 功 后 的 管 
理 员 对 象 信息 。 

在 login 方法 中 ， 首 先 调用 业务 接口 AdminInfoService 中 的 login 方法 进行 登录 验证 ; 
验证 通过 后 ,再 判断 是 否 已 为 该 管理 员 分 配 功 能 权限 ， 如 果 没 有 ， 则 以 JSON 格式 返回 “您 
没有 权限 ， 请 联系 超级 管理 员 设 置 权限 ! ”的 提示 信息 。 只 有 验证 通过 且 分 配 了 权限 的 管 
理 员 登录 ， 才 返回 “登录 成 功 ” 的 提示 ， 并 将 该 管理 员 对 象 以 admin 为 名 称 存 入 ModelMap 
类 型 的 参数 model 中 ， 并 通过 在 AdminInfoController 类 名 上 修饰 的 @SessionAttributes 注解 
将 其 存 入 Session 范围 。 登 录 成 功 后 ， 跳 转 到 后 台 管 理 首页 面 adtminjsp， 如 图 19-6 所 示 。 


< EE 
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© | © localhost:8080/ecpbm/adminjsp 


图 19-6 后 台 管理 首页 面 
admin.jsp 页 面 的 主要 代码 如 下 : 


<%@ page language="java" import="java.util.*" contentType="text/html; 
charset=utf-8" pageEncoding="utf-8" 多 > 


< 多 
if (session.getAttribute("admin") == null) 
response.sendRedirect ("/ecpbm/admin login.jsp"); 
$> 
<html> 
<head> 


<title> 后 台 管 理 首页 面 </title> 
<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" 
type="text/css" /> 
<link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> 
<link href="EasyUI/demo.css" rel="stylesheet" type="text/css" /> 
<script src="EasyUI/jquery.min.js" type="text/javascript"></script> 
<script src="EasyUI/jquery.easyui.min.js" 
type="text/javascript"></script> 
<script src="EasyUI/easyui-lang-zh CN.js" 
type="text/javascript"></script> 
</head> 
<body class="easyui-layout"> 
<div data-options="region:'north',border:false" 
style="height: 60px; background: #B3DFDA; padding: 1l0px"> 
<div align="left"> 
<div style="font-family: Microsoft YaHei; font-size: 16px;"> 
电 商 平台 后 台 管理 系统 </div> 
</div> 
<div align="right"> 
欢迎 您 ，<font color="Red">${sessionscope.admin.name}</font> 
</div> 
</div> 
<div data-options="region:'west',split:true,title:' 功 能 菜单 '" 
style="width: 180px"> 
<ul id="tt"></ul> 
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</div> 
<div data-options="region:'south',border:false™" 


style="height: 50px; background: #A9FACD; padding: 10px; text-align: 


center">powered 
by miaoyong</div> 
<div data-options="region:'center'"> 


<div id="tabs" data-options="fit:true" class="easyui-tabs" 


style="width: 500px; height: 250px;"></div> 
</div> 
<script type="text/javascript"> 
// 为 tree 指定 数据 


要 (人 ET -Ereelt 


url : 'admininfo/getTree?adminid=${sessionScope.admin.id}' 


]) 7 
$('#tt') .上 ree({ 
onClick : function(node) { 
if£ ("商品 列表 " == node.text) { 
if ($('#tabs') .tabs('exists'， ' 商 品 列表 ')) 
$('#tabs') .tabs('select'，,，' 商 品 列表 '); 
} else { 
$('#tabs') .tabs('add', { 
title : node.text, 
href : 'productlist.jsp', 
closable : true 
1); 
} 
} else if ("商品 类 型 列表 " == node.text) { 


if ($('#tabs') .tabs('exists',，' 商 品类 型 列表 ')) 
$('#tabs') .tabs('select',，' 商 品类 型 列表 ' ) ; 


} else { 
$('#tabs') .tabs('add', { 
title : node.text, 
href : 'typelist.jsp'v 
closable : true 
D); 
} 
} else if ("查询 订单 "== node.text) { 


if ($('#tabs') .tabs('exists',' 查 询 订单 ')) 
$('#tabs') .tabs('select'!， ' 查 询 订单 ') ; 


} else { 
$('#tabs') .tabs('add', { 
title : node.text, 
href : 'searchorder.jsp', 
closable : true 
Ds; 
} 
} else if ("创建 订单 "== node.text) { 


if ($('#tabs') .tabs('exists', "创建 订单 ') ) 
$('#tabs') .tabs('select'， ' 创 建 订单 ') ; 


} else { 
$('#tabs') .tabs('add', { 


< ed a 


{ 


{ 


第 19 章 电 商 平台 后 台 管理 系统 


title : node.text, 
href : 'createorder.jsp', 
closable : true 
Ds 
} 
} else if ("客户 列表 " == node.text) { 
if ($('#tabs') .tabs('exists',，' 客 户 列表 ')) { 
$('#tabs') .tabs('select',，' 客 户 列表 ' ); 
} else { 
$('#tabs') .tabs('add', { 
title : node.text, 
href : "userliste jp"r 
closable : true 
D1); 
’ 
} else if ("管理 员 列 表 " == node.text) 1{ 
if ($('#tabs') .tabs('exists'， ' 管 理 员 列表 ')) 1{ 
$('#tabs') .tabs('select',，' 管 理 员 列表 ' ) ; 
} else { 
$('#tabs') .tabs('add', { 
title : node.text, 
href : 'adminlist.jsp'v 
closable : true 
1D); 
} 
} else if ("退出 系统 " == node.text) { 
$.ajax({ 
url : 'admininfo/logout', 
success : function(data) { 
window.location.href = "admin login.jsp"; 
} 
} 


} 
DD); 
</script> 
</body> 
</html> 
在 admin.jsp 页 面 中 ,为 了 使 用 Easy UI 控件 ,同样 需要 在 页 面 开始 部 分 的 <head></head> 
标签 中 引入 Easy UI 相关 的 css 和 js 文件 。 在 <body> 标 签 中 , 将 class 属性 设置 为 easyui-layout， 
从 而 使 用 Easy UI 的 Layout 控件 生成 页 面 的 布局 。 
在 Layonut 控件 的 左 侧 ， 定 义 了 一 个 id 为 tt 的 <u> 标 签 ，Easy UI 的 Tree 控件 可 以 定义 
在 <ul> 标 签 中 。 通 过 JavaScript 将 这 个 <ul> 标 签 定义 为 一 个 Easy UI 的 Tree 控件 ， 并 为 Tree 
控件 指定 数据 源 ， 用 来 显示 系统 功能 菜单 。Tree 控件 的 数据 源 是 通过 url 属性 指定 的 ， 这 里 
为 admininfo/getTree?adminid=${sessionScope.admin.id} ， 这 个 请 求 将 映射 到 控制 器 类 
AdminInfoController 中 的 getTree 方法 ， 其 代码 如 下 : 


@RequestMapping ("getTree") 


Spring + Spring MVC + MyBatis 
框架 技术 精 讲 与 整合 案例 


@ResponseBody 
public List<TreeNode> getTree (@RequestParam(value = "adminid") String 
adminid) { 
// 根据 管理 员 编号 ， 获 取 AGminInfo 对 象 
RdminInfo admininfo = 
adminInfoService.getAdminInfoAndFunctions (Integer-parseInt (adminid)); 
List<TreeNode> nodes = new ArrayList<TreeNode>(); 
// 获取 关联 的 Functions 对 象 集合 
List<Functions> functionsList = admininfo.getFs(); 
// 对 List<Functions> 类 型 的 Functions 对 象 集合 排序 
Collections.sort (functionsList); 
// 将 排序 后 的 Functions 对 象 集合 转换 到 List<TreeNode> 类 型 的 列表 nodes 
for (Functions functions : functionsList) { 
TreeNode treeNode = new TreeNode () 7 
treeNode .setId(functions.getId())7 
treeNode .setFid(functions .getParentid())7 
treeNode .setText (functions .getName () ) 7 
nodes.add (treeNode); 


} 

// 调用 自 定义 的 工具 类 JsonFactory 的 buildtree 方法 ， 为 nodes 列表 中 的 各 个 
// TreeNode 元 素 中 的 children 属性 赋值 (该 结 点 包含 的 子 结 点 ) 

List<TreeNode> treeNodes = JsonFactory.buildtree (nodes，0) 

return treeNodes; 


} 


通过 在 getTree 方法 上 标注 @RequestMapping 注解 , 将 用 户 对 admininfo/getTree 这 个 url 
的 请 求 映射 到 getTree 方法 。 

getTree 方法 有 一 个 参数 adminid， 用 于 封装 管理 员 编 号 。 在 getTree 方法 中 ， 首 先 调用 
业务 接口 AdminInfoService 中 的 getAdminInfoAndFunctions 方法 ， 根 据 管 理 员 编号 获取 
AdminInfo 对 象 ， 然后 获取 AdminInfo 对 象 关 联 的 Functions 对 象 集合 ， 并 对 Functions 对 象 
集合 进行 排序 ， 从 而 保证 绑 定 Easy UI 的 Tree 控件 时 顺序 一 致 ， 接 着 将 排序 后 的 Functions 
对 象 集合 转换 到 List<TreeNode> 类 型 的 列表 nodes 中 ，TreeNode 是 用 于 描述 菜单 树 的 每 个 
结 点 的 实体 类 ; 最 后 调用 自 定义 工具 类 JsonFactory 中 的 buildtree 方法 ， 为 列表 nodes 中 的 
各 个 TreeNode 元 素 中 的 children 赋值 ， 即 设置 各 个 结 点 所 包含 的 子 结 点 。 

JsonFactory 类 位 于 com.ecpbm.util 包 中 ，buildtree 方法 如 下 : 


package com.ecpbm.util; 
import java.util.ArrayList; 
import java.util.List; 
import com.ecpbm.pojo.TreeNode; 
public class JsonFactory { 
public static List<TreeNode> buildtree (List<TreeNode> nodes, int id) { 
List<TreeNode> treeNodes = new ArrayList<TreeNode>(); 
for (TreeNode treeNode : nodes) { 
TreeNode node = new TreeNode(); 
node.setId(treeNode.getId()); 
node.setText (treeNode .getText ()); 
if (id == treeNode.getFid()) { 
// 递 给 调用 buildtree 方法 给 TreeNode 中 的 children 属性 赋值 
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node .setChildren (buildtree (nodes, node.getId())); 
treeNodes.add (node); 
人 
和 


return treeNodes; 
} 

¥ 

为 了 给 列表 nodes 中 的 TreeNode 元 素 中 的 children 属性 赋值 ， 递 归 调用 了 buildtree 
方法 。 

执行 getTree 方法 后 ,通过 @ResponseBody 注解 将 List<TreeNode> 类 型 的 对 象 ttreeNodes 
转换 成 JSON 格式 数据 返回 前 端 页 面 ， 从 而 为 Tree 控件 提供 数据 源 。 

在 Layout 控件 的 中 部 ， 定 义 了 一 个 id 为 tabs 的 <div> 标 签 ， 将 其 class 属性 设置 为 
easyui-tabs， 从 而 将 <div> 标 签 创建 为 一 个 Easy UI 的 Tabs 控件 。Tabs 控件 中 可 以 添加 多 个 
标签 页 ， 每 个 标签 页 可 用 来 显示 一 个 页 面 。 

在 admin.jsp 页 面 中 ， 还 为 Tree 控件 添加 了 onClick 事件 。 单 击 商品 列表 结 点 时 ， 如 果 
Tabs 控件 中 没有 商品 列表 标签 页 ， 则 向 Tabs 控件 中 添加 一 个 标签 页 ， 用 于 显示 商品 列表 页 
productlistjsp， 和 否则 选中 该 标签 页 。 单 击 商品 类 型 列表 、 查 询 订单 、 创 建 订单 、 客 户 列表 这 
些 结 点 时 ， 效 果 与 商品 列表 结 点 类 似 。 

单 击 退出 系统 结 点 时 ， 通 过 Ajax 方式 向 后 台 服 务 器 发 送 一 个 请 求 ， 请 求 的 地 址 为 
admininfo/logout， 这 个 url 请 求 将 映射 到 控制 器 类 AdminInfoController 中 的 logout 方法 ， 其 
代码 如 下 : 

@RequestMapping (value = "/logout", method = RequestMethod.GET) 

@ResponseBody 

public String logout (SessionStatus status) { 

// esessionRttributes 清除 
Status .setComplete() 7 
return "{\"success\":\"true\", \"message\":\" 注 销 成 功 \"}"; 

} 

通过 在 logout 方法 上 标注 @RequestMapping 注解 ， 将 用 户 对 admininfo/logout 这 个 url 
的 请 求 映射 到 logout 方法 。logout 方法 有 一 个 SessionStatus 类 型 的 参数 status， 调 用 
setComplete 后 ,将 保存 在 Session 中 的 管理 员 对 象 admin 清除 。 退 出 系统 后 ， 页 面 跳 转 到 后 
台 登 录 页 adtmin login.jsp。 


商品 管理 包括 商品 列表 显示 、 查 询 商品 、 添 加 商品 、 商 品 下 架 和 修改 商品 等 功能 。 
19.8.1 商品 列表 显示 


在 admin.jsp 页 面 中 , 单 击 Tree 控件 上 的 商品 列表 结 点 , 打开 商品 列表 页 productlistjsp， 
如 图 19-7 所 示 。 
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19-7 ”商品 列表 页 productlistjsp 


在 页 面 productlistjsp 的 <body></body> 部 分 ， 首 先 定义 了 一 个 id 为 dg_productinfo 的 
<table> 标 签 ， 将 其 class 属性 设置 为 easyui-datagrid， 从 而 将 <table> 标 签 创 建 为 一 个 Easy UI 
的 Datagrid 控件 ， 用 来 显示 商品 记录 ， 代 码 如 下 : 


<table id="dg productinfo" class="easyui-datagrid"></table> 


然后 定义 了 一 个 id 为 tb_productinfo 的 <div> 标 签 ,充当 Datagrid 控件 的 工具 栏 ,在 <div> 
标签 中 ,定义 了 三 个 <a> 标 签 ,将 每 个 <a> 标 签 的 class 属性 都 设置 为 easyui-linkbutton， 从 而 
将 这 三 个 <a> 标 签 创 建 为 添加 、 修 改 和 删除 三 个 Easy UI 的 链接 按钮 控件 ， 代 码 如 下 : 

<!-- 创建 Datagrid 控件 的 工具 栏 --> 


<div id="tb productinfo" style="padding: 2px S5px;"> 
<a href="javascript:void(0)" class="easyui-linkbutton" 
iconcls="icon-add" plain="true" onclick="addProduct () ;"> 添 加 </a> <a 
href="javascript:void(0)" class="easyui-linkbutton" 
iconCls="icon-edit" plain="true" onclick="editProduct () ;"> 修 改 </a> <a 
href="javascript:void(0)" class="easyui-linkbutton" 
iconCls="icon-remove" onclick="removeProduct();" plain="true"> 删 除 


</a> 
</div> 


接着 定义 一 个 id 为 searchtb_productinfo 的 <div> 标 签 ， 充 当 Datagrid 控件 的 搜索 栏 。 在 
这 个 <div> 标 签 中 ， 定 义 了 一 个 id 为 searchForm productinfo 的 <form> 标 签 。 在 <form> 标 签 
中 ， 使 用 Easy UI 的 TextBox 控件 定义 了 商品 编号 、 商 品名 称 和 商品 品牌 三 个 文本 框 控件 ， 
使 用 Easy UI 的 ComboBox 控件 定义 了 一 个 商品 类 型 组 合 框 控件 , 使 用 Easy UI 的 Numberbox 
控件 定义 了 两 个 价格 数字 框 控件 ， 代 码 如 下 : 

<!-- 创建 查询 工具 栏 --> 

<div id="searchtb productinfo" style="padding: 2px Spx;"> 

<form id="searchForm productinfo" method="post"> 
<div style="padding: 3px"> 
商品 编号 gnbsp; &nbsp;<input class="easyui-textbox" 


name="productinfo search code" 
id="productinfo search code" style="width: 11l0px" /> 
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</div> 
<div style="padding: 3px"> 
商品 名 称 gnbsp; gnbsp;<input class="easyui-textbox"™" 
name="productinfo search name" 
id="productinfo search name" style="width: 110px"” /> &nbsp; &nbsp; 商 品类 
型 enbsp; gnbsp;<input style="width: 110px;" id="productinfo search tid" 


class="easyui-combobox" name="productinfo search 七 id" 
data-options="valueField:'id',textField:'name',url:'type/getType/1'" 
value="0">gnbsp; gnbsp; 商品 品牌 snbsp 7&nbspy<input 
class="easyui-textbox" name="productinfo search brand" 
id="productinfo search brand" style="width: ll0px" /> 
&nbsp’; gnbsp; 价格 : <input class="easyui-numberbox" 


name="productinfo search priceFrom" 
id="productinfo search priceFrom" style="width: 80px;" /> ~ 

<input class="easyui-numberbox" name="productinfo search priceTo" 
id="productinfo search priceTo" style="width: 80px;" /> 

&nbsp; Enbsp;<a href="javascript:void(0)" 
class="easyui-linkbutton" iconCls="icon-search" plain="true" 
searchProduct () ; "> 查找 </a> 
</div> 
</form> 
</div> 


在 搜索 栏 中 ， 由 于 商品 类 型 组 合 框 显示 的 数据 来 自 于 数据 表 type， 因 此 在 该 组 合 框 的 
data-options 属性 中 ， 将 url 属性 设置 为 type/getType/1， 为 组 合 框 控件 指定 数据 源 ， 
type/getType/l 这 个 请 求 将 映射 到 一 个 控制 器 类 中 的 一 个 方法 。 接 下 来 ， 在 
com.ecpbm.controller 包 中 创建 一 个 类 TypeController， 并 编写 getType 方法 ， 代 码 如 下 : 


package com.ecpbm.controller; 


onclick: 


@Controller 
@RequestMapping ("/type") 
public class TypeController { 
@Autowired 
Private TypeService typeService; 
@RequestMapping("/getType/{flag}" 
@ResponseBody 
public List<Type> getTYpe (@PathVariable ("flag") Integer flag) { 
List<Type> typeList = typeService.getAll(); 
££ (flag = 1) { 
Type 七 = new Type(); 
t.setId(0); 
t.setName ("请 选择 …") ? 
typeList.add(0, t); 
和 


return typeList; 


在 TypeController 类 中 ， 通 过 @Controller 注解 指示 该 类 是 一 个 控制 器 ， 通 过 
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@RequestMapping 注解 将 用 户 对 type/getType/1 这 个 url 的 请 求 映射 到 getType 方法 。 

getType 方法 有 一 个 Integer 类 型 的 参数 flag, 通过 @PathVariable 注解 将 请 求 url 中 的 占 
位 符 参数 绑 定 到 控制 器 处 理 方法 的 参数 中 ， 这 里 将 url 中 的 0 绑 定 到 参数 flag。 

在 getType 方法 中 ， 调 用 TypeService 接口 的 getAll 方法 ， 获 取 所 有 商品 类 型 列表 。 如 
果 flag 为 1， 还 会 在 列表 中 添加 一 个 “请 选择 ...” 选 项 。 最 后 通过 @ResponseBody 注解 ， 将 
结果 进行 JSON 格式 转换 ,并 返回 给 前 端 页 面 ， 作 为 商品 类 型 组 合 框 控件 的 数据 源 。 有 了 数 
据 源 ， 需 要 在 组 合 框 控件 的 data-options 属性 中 ， 通 过 valueField 属性 指定 从 数据 源 中 获取 
哪个 属性 作为 组 合 框 的 返回 值 ， 这 里 为 id; 通过 textField 属性 指定 从 数据 源 中 获取 哪个 属 
性 作为 组 合 框 的 显示 文本 ， 这 里 为 name。 

最 后 通过 JavaScript 对 id 为 dg_productinfo 的 <table> 标 签 进行 初始 化 ， 代 码 如 下 : 


<script type="text/javascript"> 
$ (function() { 
$('#dg productinfo') .datagrid({ 
singleSelect : false，// 设 置 datagrid 为 单 选 
url : 'productinfo/list'，// 为 datagrid 设置 数据 源 
pagination : true，// 启 用 分 页 
pagesize : 10，// 设 置 初始 每 页 记录 数 (页 大 小 ) 
pageList : [ 10，15，20 ]，// 设 置 可 供 选择 的 页 大 小 
rownumbers : true，// 显 示 行 号 
fit : true，// 设 置 自 适 应 
toolbar : '#tb productinfo'，// 为 datagrid 添加 工具 栏 
header : '#searchtb productinfo'，// 为 datagrid 添加 搜索 栏 
columns : [ [ { // 编 辑 datagrid 的 列 
title : "序号 
field : "id'v 
align : 'center', 
checkbox : true 
| 
field : 'name', 
title : "商品 名 称 '， 
width : 200 
hx 4 
field £ "typey 
title : "商品 类 型 '， 
formatter : function(value, row, index) { 
if (row.type) { 
return row.type.name; 


} else { 
return value; 
} 
a 
width : 60 
We 
field : "status', 
title : “商品 状态 '， 
formatter : function(value, row, index) { 
if (row.status == 1) { 
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return "在 售 "; 
} else { 
return "下 架 "; 


} 
ha 
width : 60 
}, { 
field : 'code', 


title : "商品 编码 '， 
width : 100 


field : 'brand', 
title : "品牌 '， 
width : 120 


field : 'price', 
title : "价格 "， 
width : 50 


field : "num'yv 
title : "库存 '， 
width : 50 


field : "intro'v 
title : "商品 描述 '， 
width : 450 


</script> 


Datagrid 控件 的 初始 化 是 通过 相关 属性 设置 来 完成 的 , singleSelect 属性 用 于 设置 是 否 单 
选 ， 这 里 为 false， 表 示人 允许 多 选 ，pagination 属性 用 于 设置 是 否 分 页 ， 这 里 为 rue， 表 示人 允 
许 分 页 ， pageSize 属性 用 于 设置 每 页 初始 记录 数 ， 这 里 为 10; pageList 用 于 设置 可 供 选择 的 
每 页 记录 数 ， 这 里 为 [ 10, 15, 20 ]， 表 示 可 以 选择 每 页 显示 10、15 或 20 条 记录 ; rownumbers 
属性 用 于 设置 是 否 显示 行 号 ， 这 里 为 tue， 表 示 显 示 行 号 ;fit 属性 用 于 设置 是 否 自 适应 显 
示 数 据 , 这 里 为 tue, 允许 自 适应 显示 ; toolbar 属性 用 于 设置 工具 栏 , 这 里 为 #tb_productinfo， 
表示 要 将 id 为 tb_productinfo 的 <div> 标 签 作为 Datagrid 控件 的 工具 栏 ， header 属性 用 于 设 
置 表 头 ,这 里 为 #searchtb_productinfo， 表 示 要 将 id 为 searchtb_productinfo 的 <div> 标 签 作为 
Datagrid 控件 的 标题 头 ，columns 属性 用 于 设置 Datagrid 控件 显示 的 列 ; url 属性 用 于 指定 
Datagrid 控件 的 数据 源 ， 这 里 为 productinfo/list, 这 个 url 请 求 会 映射 到 一 个 控制 器 类 中 的 一 
个 方法 。 接 下 来 , 在 com.ecpbm.controller 包 中 ,创建 一 个 名 为 ProductInfoController 的 控制 
器 类 ， 并 编写 一 个 list 方 法， 代码 如 下 : 


Package com.ecpbm.controller; 


@Controller 
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@RequestMapping ("/productinfo") 
public class ProductIinfoController { 
@Autowired 
ProductIinfoService productIinfoService; 
// 后 台 商 品 列表 分 页 显示 
@RequestMapping (value = "/list") 
@ResponseBody 
public Map<String, Object> list(Integer page, Integer rows, ProductInfo 
productInfo) { 
// 初始 化 分 页 类 对 象 pager 
Pager pager = new Pager(); 
pager.setCurPage (page); 
pager.setPerPageRows (rows); 
// 创建 params 对 象 ， 封 装 查询 条 件 
Map<String，Object> params = new HashMap<String，Object>() 
params.put ("productInfo", productInfo); 
// 获取 满足 条 件 的 商品 总 数 
int totalCount = productIinfoService.count (params); 
// 获取 满足 条 件 的 商品 列表 
List<ProductInfo> productinfos = 
productIinfoService.findProductInfo(productInfo, pager); 
// 创建 result 对 象 ， 保 存 查询 结果 数据 
Map<String，Object> result = new HashMap<String，Object> (2) 7 
result.put ("total", totalCount); 
result.put ("rows", productinfos); 
// 将 结果 以 JSoN 格式 发 送 到 前 端 控制 器 


return result; 


在 ProductInfoController 类 中 ， 通 过 @Controller 注解 指示 该 类 是 一 个 控制 器 ， 通 过 
@RequestMapping 注解 将 用 户 对 productinfo/list 这 个 url 的 请 求 映射 到 list 方法 。 

list 方法 有 三 个 参数 ,一 个 是 ProductInfo 类 型 的 参数 productInfo， 用 于 封装 表单 传递 来 
的 查询 条 件 ; 另外 两 个 参数 是 page 和 rows， 用 于 接收 从 Datagrid 控件 传递 来 的 页 码 和 每 页 
显示 的 记录 数 。 

在 list 方法 中 ， 首 先 初 始 化 一 个 分 页 类 对 象 pager， 给 其 设置 curPage 和 perPageRows 
两 个 属性 值 ， 然 后 创建 Map<String，Object> 类 型 的 对 象 params， 用 于 封装 查询 条 件 ， 接 着 
依次 调用 ProductInfoService 接口 的 count 方法 获取 满足 条 件 的 商品 总 数 ， 调 用 
findProductInfo 方法 获取 满足 条 件 的 商品 列表 ; 再 创建 Map<String，Object> 类 型 的 对 象 
result， 保 存 查询 结果 数据 ， 最 后 将 返回 结果 转 为 JSON 格式 ， 以 字符 串 形式 发 送 到 前 端 页 
面 productlistjsp， 为 Datagrid 控件 提供 数据 源 。 


19.8.2 ”查询 商品 


在 商品 列表 页 productlistjsp 的 搜索 栏 中 ， 输 入 商品 编号 、 商 品名 称 、 商 品类 型 、 商 品 
品牌 或 价格 范围 ， 单 击 “ 查 找 ” 按 钮 ， 将 执行 JavaScript 函数 searchProduct， 代 码 如 下 : 


< Re 
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// 查询 商品 
function searchProduct() { 
var productinfo search code = $('#productinfo search code') 
.textbox("getValue"); 
var productinfo search name = $('#productinfo search name') 


.textbox("getValue"); 
var productinfo search tid = $('#productinfo search tid') .combobox( 
"getValue"); 
var productinfo search brand = $('#productinfo search brand') 
.textbox("getValue"); 
var productinfo search priceFrom; 
if ($("#productinfo search priceFrom") .val() != null 
&& $("#productinfo search priceFrom") .val() != "") { 
productinfo search priceFrom = $( 
'#productinfo search priceFrom').textbox("getValue"); 
} else { 
productinfo search priceFrom = "0"7 
} 
var productinfo search priceTo; 
if ($("#productinfo search priceTo") .val() != null 
&& $("#productinfo search priceTo").val() != "") { 
productinfo search priceTo = $('#productinfo search priceTo') 
.textbox ("getValue"); 
} else { 
productinfo search priceTo = 


} 

$("#dg productinfo") .datagrid('load', { 
"code" : productinfo search code, 
"name" : productinfo search name, 
"type.id" : productinfo search tid， 
"brand" : productinfo search brand, 
"priceFrom" : productinfo search priceFrom, 
"priceTo" : productinfo search priceTo 

Ds; 

} 


在 函数 searchProduct 中 , 首先 获取 用 户 输入 的 查询 条 件 , 然后 执行 Datagrid 控件 的 load 
方法 , 再 次 将 请 求 发 送 到 productinfo/list, 即 再 次 执行 控制 器 类 ProductInfoController 中 的 list 
方法 ， 并 将 搜索 栏 中 输入 的 查询 条 件 传递 过 去 ，list 方法 根据 传递 来 的 查询 参数 重新 获取 商 
品 列表 以 更 新 Datagrid 控件 的 数据 源 。 

以 查询 商品 类 型 为 冰箱 、 价格 在 2000 到 4000 的 商品 为 例 。 执行 查询 后 , 结果 如 图 19-8 
所 示 。 
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19.8.3 添加 商品 


在 商品 列表 页 productlistjsp 的 工具 栏 中 ， 单 击 “ 添 加 ”按钮 ， 执 行 JavaScript 函数 


addProduct， 打 开 新 增 商品 对 话 框 ， 代 码 如 下 : 


@«-… 


// 打开 新 增 商品 对 话 框 

function addProduct() { 
$('#dlg productinfo') .dialog('open') .dialog('setTitle', ' 新 增 商品 ' ) ; 
$('#dlg productinfo') .form('clear'); 
urls = "productinfo/addProduct'; 


} 
新 增 商 品 对 话 框 的 布局 代码 如 下 : 


<div id="dlg productinfo" class="easyui-dialog" title=" 添 加 商品 " 
closed="true" style="width: 500px;"> 
<div style="padding: 1l0px 60px 20px 60px"> 
<form id="ff productinfo" method="POST" action="" 
enctype="multipart/form-data"> 
<table cellpadding="5"> 
<tr> 
<td> 商 品 状态 :</td> 
<td><select id="status" class="easyui-combobox" 
name="status" style="width: 150px;"> 
<option value="1"> 在 售 </option> 
<option value="0"> 下 架 </option> 
</select></td> 
</tr> 
<tr> 
<td> 商 品类 型 :</td> 
<td><input style="width: 150px;" id="type.id" 
class="easyui-combobox" name="type.id" 
data-options="valueField:'id',textField: 'name', 
url:'type/getType/0'"></input> 
</td> 
</tr> 
<tr> 
<td> 商 品名 称 :</td> 
<td><input class="easyui-textbox" type="text" 
id="name" name="name" data-options="required:true"></input></td> 
</tr> 
<tr> 
<td> 商 品 编码 :</td> 
<td><input class="easyui-textbox" type="text" 
id="code" name="code" data-options="required:true"></input></td> 
</tr> 
<tr> 
<tq> 商 品 品 牌 :</tq> 
<td><input class: 


easyui-textbox" type="text" 


id="brand" name="brand" data-options="required:true"></input></td> 
/tr> 
<tr> 
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<td> 商 品 数量 :</td> 
<td><input class="easyui-textbox" type="text" 
id="num" name="num" data-options="required:true"></input></td> 
二 和 
< 
<td> 商 品 价格 :</td> 
<td><input class="easyui-textbox" type="text" 
id="price" name="price" data-options="required:true"></input></td> 
</tr> 
<tr> 
<td> 商 品 描述 :</td> 
<td><input class="easyui-textbox" name="intro" 
id="intro" data-options="multiline:true" style="height: 
60px"></input></td> 
</tr> 
<tr> 
<td> 商 品 图 片 :</td> 
<td><input class="easyui-filebox" id="file" name="file" 
style="width: 200px"” value=" 选 择 图 片 ">></input></td> 
</tr> 
</table> 
</form> 
<div style="text-align: center; padding: 5px"> 
<a href="javascript:void(0)" class="easyui-linkbutton" 
onclick="saveProduct ();"> 保 存 </a> <a 
href="javascript:void(0)" class="easyui-linkbutton" 
onclick="clearForm() ;"> 清 空 </a> 
</div> 
</div> 
</div> 


从 布局 上 来 说 ， 新 增 商品 对 话 框 使 用 了 一 个 id 为 dlg_productinfo 的 <div> 标 签 ， 通过 将 
其 easyui-dialog 属性 设置 为 easyui-dialog， 从 而 将 这 个 <div> 标 签 创 建 为 Easy UI 的 Dialog 
控件 。 在 <div> 标 签 中 ， 定 义 了 一 个 id 为 任 productinfo 的 <form> 标 签 。 在 <form> 标 签 中 ， 
依次 定义 了 商品 状态 和 商品 类 型 两 个 组 合 框 控件 ， 商 品名 称 、 商 品 编码 、 商 品 品牌 、 商 品 
数量 、 商 品 价格 和 商品 描述 六 个 文本 框 控件 ， 商 品 图 片 文件 上 传 控件 。 最 后 使 用 Easy UI 
的 Link Button 控件 定义 了 保存 和 清空 两 个 链接 按钮 ,新 增 商品 对 话 框 的 效果 如 图 19-9 所 示 。 
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在 新 增 商品 对 话 框 中 ， 由 于 商品 类 型 组 合 框 显示 的 数据 来 自 于 数据 表 type， 因 此 在 其 
data-options 属性 中 ， 将 url 属性 设置 为 type/getType/0， 为 组 合 框 控件 指定 数据 源 。 

在 新 增 商品 对 话 框 ,输入 商品 信息 ,， 单 击 “ 保 存 ” 按 钮 ， 执 行 JavaScript 函数 saveProduct， 
代码 如 下 : 

// 保存 商品 信息 


function saveProduct() { 
$("#ff productinfo") .form("submit", { 
url : urls，// 使 用 参数 


success : function(result) { 


var result = eval('(' + result + ')'); 
if (result.success == 'true') { 
$("#dg productinfo") .datagrid("reload"); 
$("#dlg productinfo") .dialog ("close"); 
下 
$.messager.show({ 
title : "提示 信息 "， 
msg : result.message 
1); 


1); 

} 

在 打开 新 增 商品 对 话 框 时 ， 己 经 将 urls 设置 为 productinfo/addProduct。 因 此 ， 在 函数 
saveProduct 中 ， 通 过 JavaScript 将 表单 提交 到 url 属性 指定 的 urls。productinfo/addProduct 
这 个 url 请 求 将 映射 到 控制 器 类 ProductInfoController 中 的 addProduct 方法 ;success 参数 的 
类 型 为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 参数 
result， 然 后 判断 result 参数 中 success 名 称 所 对 应 的 值 是 否 等 于 tue。 如 果 等 于 tue， 表 示 
添加 成 功 ， 则 调用 Easy UI 的 Datagrid 控件 的 reload 方法 ， 重 新 获取 商品 列表 信息 ， 再 关闭 


新 增 商品 对 话 框 。 
在 控制 器 类 ProductInfoController 中 ，addProduct 方法 的 代码 如 下 : 
// 添加 商品 
@RequestMapping (value = "/addProduct", produces = 
"text/html;charset=UTF-8") 
@ResponseBody 
public String addProduct (ProductInfo pi, @RequestParam(value = "file", 
required = false) MultipartFile file, HttpServletRequest request, ModelMap 
model) { 


// 服务 器 端 upload 文件 夹 物 理 路 径 
String path = 
request.getSession() .getServletContext () .getRealPath ("product images"); 
// 获取 文件 名 
String fileName = file.getOriginalFilename (); 
// 实例 化 一 个 File 对象， 表示 目标 文件 ( 含 物理 路 径 ) 
File targetFile = new Filel(path, fileName); 
1£f (itargetFile.exists()) { 
targetFile.mkdirs(); 
} 


< EE 
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try { 

// 将 上 传 文件 写 到 服务 器 上 指定 的 文件 

file.transferTo (targetFile); 

pi.setPic(fileName); 

productIinfoService.addProductInfo (pi); 

return "{\"success\":\"true\", \"message\":\" 商 品 添加 成 功 \"}"; 
} catch (Exception e) { 

return "{\"success\":\"false\", \"message\":\" 商 品 添加 失败 \"}"; 
} 


在 addProduct 方法 上 标注 @RequestMapping 注解 , 将 productinfo/addProduct 这 个 ul 请 
求 映 射 到 addProduct 方法 。 

addProduct 方法 有 四 个 参数 ， 第 一 个 是 ProductInfo 类 型 的 参数 pi， 用 于 封装 新 增 商品 
对 话 框 中 输入 的 商品 信息 。 第 二 个 参数 是 MultipartFile 类 型 的 参数 file, 通过 @RequestParam 
注解 将 表单 中 文件 上 传 控 件 中 选择 的 图 片 文件 绑 定 到 参数 fle 中 。 第 三 个 参数 是 
HttpServletRequest 类 型 的 对 象 request， 用 于 封装 客户 端 浏 览 器 发 出 的 请 求 。 第 四 个 参数 是 
ModelMap 类 型 的 参数 model， 用 于 将 数据 传递 到 前 端 页 面 。 

在 addProduct 方法 中 ， 首 先 要 将 选择 的 图 片 文件 上 传 到 服务 器 上 指定 的 文件 ， 然 后 还 
需要 调用 ProductInfoService 接口 中 的 addProductInfo 方法 ， 将 新 增 商 品 添加 到 数据 表 
product_info 中 。 如 果 添 加 成 功 ， 则 向 前 端 页 面 发 送 成 功 信息 ， 否 则 发 送 失败 的 信息 。 


19.8.4 ”商品 下 架 


在 商品 列表 页 productlistjsp 的 Datagrid 控件 中 ， 选 中 一 个 或 多 条 记录 前 的 复 选 框 ， 再 
单 击 工具 栏 中 的 删除 按钮 ， 执 行 JavaScript 函数 removeProduct， 代 码 如 下 : 


// 删除 商品 (商品 下 架 ) 
function removeProduct() { 
var rows = $("#dg productinfo") .datagrid('getSelections'); 
if (rows.length > 0) { 
$.messager.confirm('Confirm’', ' 确 认 要 删除 么 2'，function(r) 1{ 
if (r) { 
var ids = ""; 
for (var i = 0; i < rows.length; i++) { 
ids 4= rowaslil id + 
} 
$.post('productinfo/deleteProduct', { 
id : ids, 
flag : 0 
}, function(result) { 
if (result.success == 'true') { 
$("#dg productinfo") .datagrid('reload'); 
$.messager.show({ 
title : ' 提 示 信 息 '， 
msg : result.message 
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$.messager.show({ 
title : ' 提 示 信 息 '， 
msg : result.message 


1); 
} else { 
$.messager.alert (' 提 示 '，' 请 选择 要 删除 的 行 '，'info')， 
3 
} 
在 函数 removeProduct 中 ， 首 先 获 取 Datagrid 控件 上 选中 的 商品 记录 ， 将 选中 的 商品 编 
号 保存 到 变量 ids 中 ， 并 以 逗号 分 隔 ， 然 后 通过 $.post 发 送 一 个 productinfo/deleteProduct 请 
求 ， 这 个 url 请 求 将 映射 到 控制 器 类 ProductInfoController 中 的 deleteProduct 方法 ， 并 且 会 
向 这 个 方法 传递 id 和 flag 两 个 参数 .如 果 这 个 方法 的 返回 值 中 包含 的 success 属性 值 为 tue， 
则 表示 下 架 成 功 ， 此 时 会 调用 Easy UI 的 Datagrid 控件 的 reload 方法 , 重新 获取 商品 列表 信 
息 ， 否 则 商品 下 架 失 败 。 
在 控制 器 类 ProductInfoController 中 ，deleteProduct 方法 的 代码 如 下 : 


// 商品 下 架 (删除 商品 ) 


@RequestMapping (value = "/deleteProduct", produces = 
"text/html;charset=UTF-8") 
@ResponseBody 
public String deleteProduct (@RequestParam(value = "id") String id 
@RequestParam(value = "flag") String flag) { 

String ger = “wy 

try { 


productInfoService.modifyStatus (id.substring(0, id.length() - 1), 
Integer.parseInt (flag)); 
str = "{\"success\":\"true\", \"message\":\" 删 除 成 功 \"}"; 
} catch (Exception e) { 
str = "{\"success\":\"false\", \"message\":\" 删 除 失败 \"}"; 
» 


return str; 

} 

deleteProduct 方法 有 两 个 参数 ,第 一 个 参数 是 String 类 型 的 参数 id, 通过 @RequestParam 
注解 将 前 端 页 面 传递 来 的 参数 id 绑 定 到 deleteProduct 方 法 的 参数 id 中 .第 二 个 参数 是 String 
类 型 的 参数 flag， 通 过 @RequestParam 注解 将 前 端 页 面 传递 来 的 参数 flag 绑 定 到 
deleteProduct 方法 的 参数 flag 中 。 

在 deleteProduct 方法 中 ， 调 用 了 业务 接口 ProductInfoService 中 的 modifyStatus 方法 ， 
根据 选中 商品 的 id 号 ， 将 其 状态 设置 为 0。 如 果 执 行 成 功 ， 则 向 前 端 页 面 发 送 下 架 成 功 信 
息 ， 否 则 发 送 下 架 失败 信息 。 
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19.8.5 ”修改 商品 


在 商品 列表 页 productlist.jsp 的 Datagrid 控件 中 ， 选 中 某 一 条 记录 前 的 复 选 框 ， 再 单 击 
工具 栏 中 的 修改 按钮 ， 将 执行 JavaScript 函数 editProduct， 代 码 如 下 : 


// 打开 修改 商品 对 话 框 (与 新 增 商品 对 话 框 共 用 ) 
function editProduct() { 
Var rows = $("#dg productinfo") .datagrid('getSelections'); 
if (rows.length > 0) { 
Var row = $("#dg productinfo") .datagrid("getSelected") 7 
if (row) { 
$("#dlg productinfo") .dialog ("open") .dialog('setTitle', 
"修改 商品 信息 ') ; 
$("#ff productinfo") .form("load", { 
"type.id" : row.type.id, 
"name" : row.name, 
"code" : row.code, 
"brand" : row.brand, 
"num" : row.num, 
wprice™" : row.price, 
"intro" : row.intro, 
"status" : row.status, 
1); 
urls = "productinfo/updateProduct?id=" + row.id; 
} 
} else { 
$.messager.alert (' 提 示 '，' 请 选择 要 修改 的 行 '，'info'); 
} 
} 


在 函数 editProduct 中 , 首先 获取 Datagrid 控件 中 选中 的 行 ,然后 打开 修改 商品 对 话 框 (与 
添加 商品 使 用 同一 个 对 话 框 和 表单 ), 并 将 要 修改 的 商品 信息 绑 定 到 对 话 框 中 的 表单 文本 域 ， 
其 效果 如 图 19-10 所 示 。 
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二: Har 


高 后 国 片 。 三 hove Fie 


19-10 ”修改 商品 信息 对 话 框 


修改 完 商 品 信息 后 ， 单 击 “ 保 存 ” 按 钮 ， 发 送 一 个 productinfo/updateProduct 请 求 ， 这 
个 url 请 求 将 映射 到 控制 器 类 ProductInfoService 中 的 updateProduct 方法 ， 其 代码 如 下 : 
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// 修改 商品 
@RequestMapping (value = "/updateProduct", produces = 
"text/html;charset=UTF-8") 
@ResponseBody 
Public String updateProduct (ProductInfo pi, @RequestParam(value = "file", 
required = false) MultipartFile file, HttpServletRequest request, ModelMap 
model) { 


// 服务 器 端 upload 文件 夹 物 理 路 径 
String path = 
request.getSession() .getServletContext () .getRealPath ("product images"); 
// 获取 文件 名 
String fileName = file.getOriginalFilename (); 
// 实例 化 一 个 File 对 象 ， 表 示 目 标 文件 ( 含 物理 路 径 ) 
File targetFile = new File(path, fileName); 
if (!targetEile.exists()) { 
targetFile.mkdirs(); 
} 
try { 
// 将 上 传 文件 写 到 服务 器 上 指定 的 文件 
file.transferTo (targetFile); 
pi.setPic(fileName); 
productInfoService.modifyProductInfo (pi); 
return "{\"success\":\"true\", \"message\":\" 商 品 修改 成 功 \"}"; 
} catch (Exception e) { 
return "{\"success\":\"false\", \"message\":\" 商 品 修改 失败 \"}"; 


} 
} 


在 控制 器 类 ProductInfoService 中 ，updateProduct 方法 的 参数 与 addProduct 方法 的 参数 
相同 ， 只 是 在 ProductInfo 类 型 的 参数 pi 中 ， 还 封装 了 通过 url 传递 来 的 商品 id 号 。 

在 updateProduct 方法 中 , 调用 了 业务 接口 ProductInfoService 中 的 modifyProductInfo 方 
法 ， 将 对 象 pi 的 属性 值 更 新 到 数据 表 product_info 中 。 

至 此 ， 商 品 管理 的 功能 就 讲解 完了 。 商 品类 型 管理 与 商品 管理 实现 过 程 类 似 ， 由 于 篇 
幅 所 限 ， 在 此 不 再 歼 述 。 


19.9 订单 管理 
订单 管理 包括 创建 订单 、 查 询 订 单 、 删 除 订 单 和 查看 订单 明细 等 功能 。 


19.9.1 创建 订单 


在 admin.jsp 页 面 中 , 单 击 Tree 控件 上 的 创建 订单 结 点 ,打开 创建 订单 页 createorder.jsp， 
如 图 19-11 所 示 。 


@@< EE Ne eC 
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订单 日 期 |2018-06-26 。 中] 订单 关 杰 未 付 


恰 去 加 订单 明 到 加 全 让 林 辣 加 莉 给 订 关 明志 
] 产 台 和 称 

1 目 |m9BCD-206TME) 

2 目 | 海 recp.216SDN 


powered by miaorong 


图 19-11 创建 订单 页 


在 页 面 createorderjsp 的 <body></body> 部 分 ， 首 先 定义 一 个 id 为 odbox 的 table， 创 建 
Easy UI 的 Datagrid 控件 ， 用 来 录入 订单 明细 信息 ， 代 码 如 下 : 


<table id="odbox"></table> 


然后 创建 一 个 id 为 ordertb 的 <div> 标 签 , 作为 Datagrid 控件 的 工具 栏 。 在 <div> 标 签 中 ， 
定义 了 三 个 <a> 标 签 , 将 每 个 <a> 标 签 的 class 属性 都 设置 为 easyui-linkbutton， 从 而 将 这 三 个 
<a> 标 签 创建 为 添加 订单 明细 、 保 存 订 单 和 删除 订单 明细 三 个 Easy UI 的 链接 按钮 控件 ， 代 
码 如 下 : 


<div id="ordertb" style="padding: 2px 5px;"> 
<a href="javascript:void(0)" class="easyui-linkbutton" 
iconCls="icon-add" plain="true" onclick="addorderDetail(); "> 添加 订 
单 明细 </a> 
<a href="javascript:void(0)" class="easyui-linkbutton" 
iconCls="icon-save"” plain="true" onclick="saveorder () ;"> 保 存 订单 
</a> 
<a href="javascript:void(0)" class="easyui-1inkbutton" 
iconCls="icon-remove" plain= 
删除 订单 明细 </a> 


</div> 


接着 定义 一 个 id 为 divOrderInfo 的 <div> 标 签 , 用 于 创建 订单 信息 录入 布局 , 代码 如 下 : 


<div id="divOorderInfo"> 
<div style="padding: 3px"> 
客户 名 称 gnbsp;<input style="width: 115px;" id="create uid" 
class="easyui-combobox" name="create uid" value="0" 
data-options="valueField:'id',textField: 'userName', 
url:'userinfo/getValidUser'">gnbsp; gnbsp; gnbsp; 
订单 金额 enbsp; <input type="text" name="create orderprice" 
id="create orderprice" class="easyui-textbox"™ 


"true" onclick="removeOrderDetail();"> 


readonly="readonly" style="width: 115px"” /> gnbsp;é&nbsp; 
</div> 
<div style="padding: 3px"> 
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订单 日 期 enbsp; <input type="text" name="create ordertime" 


id="create ordertime" class="easyui-~datebox" style="width: 
115px" value="<%=new Date () .toLocaleString()%>" /> gnbsp;&nbsp; 
订单 状态 gnbsp;<select id="create status" class="easyui-combobox" 
name="create status" style="width: 115px7"> 
<option value=" 未 付款 " selected> 未 付款 </option> 
<option value=" 已 付款 "> 已 付款 </option> 
<option value=" 待 发 货 "> 待 发 货 </option> 
<option value=" 已 发 货 "> 已 发 货 </option> 
<option value=" 已 完成 "> 已 完成 </option> 
</select> 
</div> 
</div> 


在 这 个 <div> 标 签 中 ， 客 户 名 称 使 用 了 Easy UI 的 ComboBox 控件 ， 其 绑 定 的 数据 源 为 
userinfo/getValidUser， 这 个 url 请 求 将 映射 到 控制 器 类 中 的 一 个 方法 。 接 下 来 ， 在 
com.ecpbm.controller 包 中 , 创建 一 个 UserInfoController 类 ,并 在 类 中 编写 一 个 getValidUser 
方法 ， 代 码 如 下 : 


Package com.ecpbm.controller; 


@Controller 
@RequestMapping ("/userinfo") 
public class UserInfoCcontroller { 
@Autowired 
UserInfoService userInfoSservice; 
@RequestMapping ("/getValidUser") 
@ResponseBody 
public List<UserInfo> getValidUser() { 
List<UserInfo> uiList = userInfoService.getValidUser (); 
UserInfo ui = new UserInfo(); 
ui.setId(0); 
ui.setUserName ("请 选择 …"); 
uiList.add(0, ui); 
return uiList; 


} 


在 UserInfoController 类 中 ， 通 过 @Controller 注解 指示 该 类 是 一 个 控制 器 ， 通 过 
@RequestMapping 注解 将 用 户 对 userinfo/getValidUser 这 个 url 的 请 求 映射 到 getValidUser 
方法 。 

在 getValidUser 方法 中 ,首先 调用 业务 接口 UserInfoService 中 的 getValidUser 方法 ， 获 
取 系 统 所 有 合法 客户 。 然 后 通过 @ResponseBody 注解 ， 将 方法 返回 结果 进行 JSON 格式 转 
换 ， 再 发 送 到 前 端 页 面 ， 为 客户 名 称 组 合 框 控件 提供 绑 定数 据 。 

在 页 面 createorder.jsp 中 ， 通 过 JavaScript 对 id 为 odbox 的 创建 为 Easy UI 的 Datagrid 
控件 的 <table> 标 签 进行 初始 化 ， 代 码 如 下 : 


<script type="text/javascript"> 
var $odbox = $("'#o0dbox'); 
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$(function() { 
$odbox.datagrid({ 
rownumbers : true, 
singleSelect : false, 
fit : true, 


toolbar : '#ordertb', 
header : '#divorderIinfo', 
columns : [ [{ 

title : ' 序 号 '， 

ELeld 

align : 'center', 


checkbox : true 
人 

Eeld "pid's 

title : "商品 名 称 '， 

width : 300, 

editor : { 
type : 'combobox', 
options. 2 { 


valueField : 'id', 
textField : 'name', 
url : 'productinfo/getOonsaleProduct', 


onChange: function (newValue, oldValue) { 
var rows = $odbox.datagrid('getRows'); 
var orderprice=0; 
for (var i = 0; i < rows.length; i++) { 
var pidEd = $('#o0odbox') .datagrid('getEditor', { 
indexs: i; 
fields "pie 
D1); 
var priceEd = $('#o0dbox') .datagrid('getEditor', { 
index: i, 
fields "price" 
Wr 
var totalpriceEd = $('#o0dbox') .datagrid('getEditor', { 
index: i, 
field: 'totalprice' 
Ds 
var numEd = $('#o0odbox') .datagrid('getEditor', { 
index: i, 
field: "num' 
Hs 
if (pidEd != null){ 
var pid= 
$ (pidEd.target) .combobox('getValue'); 
$.ajax({ 


typPes "POST", 
url: 'productinfo/getPriceById', 
data: {pid : pid}, 
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success: function(result) { 
$ (priceEd.target) .numberbox('setValue',result); 
$ (totalpriceEd.target) .numberbox('setValue', 
result * $ (numEd.target) .numberbox('getValue')); 
orderprice=Number (orderprice)+ 
Number ($ (totalpriceEd.target) .numberbox('getValue')); 
Fa 
dataType: 'json'v 
async : false 


]) 7 


} 
$("#create orderprice") .textbox("setValue",orderprice); 


rR! 
field : "price', 
title 5 7 单价， 
width : 80, 
editor: { 
type : "numberbox", 
options: { 
editable : false 


} 
二 
field 2 num’s 
title : "数量 '， 
width : 50， 
editor : { 
type : 'numberbox', 
options :{ 
onChange: function (newValue, oldValue) { 
va rows = $0odbox.datagrid('getRows'); 
var orderprice=0; 
for (var i = 0; i < rows.length; i++) { 
var priceEd = $('#0dbox') .datagrid('getEditor', { 
index: i, 
field: 'price' 
DD); 
var totalpriceEd = $('#o0dbox') .datagrid('getEditor', { 
index: i, 
field: 'totalprice" 
Ds 


var numEd 


= $('#0dbox') .datagrid('getEditor', { 
index: i, 
field: "num'" 
Ey 
$ (totalpriceEd.target) .numberbox('setValue', 
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$ (priceEd.target) .numberbox('getValue') * 
$ (numEd.target) .numberbox('getValue')); 
orderprice=Number (orderprice)+ 
Number ($ (totalpriceEd.target) .numberbox('getValue')); 
} 
$("#create orderprice") .textbox("setValue",orderprice); 


} 


field : 'totalprice', 
title : “小 计 "， 
width : 100, 
editor: { 
type : "numberbox", 
options: { 
editable : false 


</script> 


Datagrid 控件 的 初始 化 是 通过 相关 属性 设置 来 完成 的 ，rownumbers 属性 用 于 设置 是 否 
显示 行 号 ， 这 里 为 rue， 表示 显示 行 号 ; singleSelect 属性 用 于 设置 是 否 单 选 ， 这 里 为 false， 
表示 人 允许 多 选 ; fit 属性 用 于 设置 是 否 自 适应 显示 数据 , 这 里 为 tue, 允许 自 适应 显示 ; toolbar 
属性 用 于 设置 工具 栏 ， 这 里 为 #ordertb， 表 示 要 将 id 为 ordertb 的 <div> 标 签 作为 Datagrid 控 
件 的 工具 栏 ， header 属性 用 于 设置 表 头 ， 这 里 为 #divOrderInfo， 表 示 要 将 id 为 divOrderInfo 
的 <div> 标 签 作为 Datagrid 控件 的 标题 头 ;columns 属性 用 于 设置 Datagrid 控件 显示 的 列 。 

其 中 ， 商 品名 称 列 中 使 用 了 Easy UI 的 ComboBox 控件 ， 通 过 url 属性 指定 其 绑 定 的 数 
据 源 为 productinfo/getOnSaleProduct， 这 个 url 请 求 将 映射 到 控制 器 类 ProductInfoController 
中 一 个 方法 。 接 下 来 ， 在 ProductInfoController 类 中 编写 getOnSaleProduct 方法 ， 代 码 如 下 : 

// 获取 在 售 商 品 列表 

@ResponseBody 

@RequestMapping ("/getOonsaleProduct") 


public List<ProductInfo> getonsaleProduct() { 
List<ProductInfo> piList = productInfoService.getOonsaleProduct (); 


return piList; 
’ 
通过 在 getOnSaleProduct 方法 上 标注 @RequestMapping 注解 , 从 而 将 用 户 对 productinfo/ 
getOnSaleProduct 这 个 url 的 请 求 映射 到 getOnSaleProduct 方 法 ,在 getOnSaleProduct 方 法 中 ， 
调用 业务 接口 ProductInfoService 的 getOnSaleProduct 方法 获取 在 售 商 品 列表 ， 并 通过 
@ResponseBody 注解 ， 将 List<ProductInfo> 类 型 的 返回 值 piList 进行 JSON 格式 转换 ， 再 发 
送 到 前 端 页 面 。 
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此 外 ， 在 商品 名 称 组 合 框 控件 中 ， 还 添加 了 onChange 事件 处 理 代码 ， 实 现 根据 所 选择 
的 商品 ， 显 示 商 品 价格 列 数据 ， 并 更 新 小 计 列 数据 和 订单 金额 文本 域 值 。 根 据 商品 id 获取 
商品 单价 是 通过 AJAX 向 后 台 服 务 器 发 送 请 求 获得 的 , 请 求 的 地 址 为 productinfo/getPriceByld， 
这 个 url 请 求 将 映射 到 控制 器 类 ProductInfoController 中 的 getPriceById 方法 ， 其 代码 如 下 : 


// 根据 商品 ia 获取 商品 单价 
@RequestMapping ("/getPriceById") 
Q@ResponseBody 
public String getPriceById(@RequestParam(value = "pid") String pid) { 
if (pid != null && !"".equals(pid)) { 
ProductIinfo pi = 
productIinfoService.getProductIinfoById (Integer.parseInt (pid)); 
return pi.getPrice() + "" 
} else { 
return ""; 


} 


} 

在 数量 列 的 Easy UI NumberBox 控件 中 ， 也 添加 了 onChange 处 理 代码 ， 实 现 根据 所 填 
写 的 数量 更 新 小 计 列 数据 和 订单 金额 文本 域 值 。 

在 创建 订单 页 createorderjsp 的 工具 栏 上 ， 包 括 添 加 订单 明细 、 删 除 订 单 明 细 和 保存 订 
单 三 个 按钮 ， 接 下 来 具体 讲解 这 些 按钮 功能 的 实现 过 程 。 


1. 添加 订单 明细 

单 击 添加 订单 明细 按钮 时 ,会 触发 一 个 onclick 事件 ,通过 JavaScript 函数 addOrderDetail 
来 处 理 该 事件 ， 以 实现 在 Easy UI 的 Datagrid 控件 上 增加 一 个 新 行 ， 函 数 addOrderDetail 的 
代码 如 下 : 

// datagrid 中 添加 记录 行 


function addorderDetail() { 
$odbox.datagrid('appendRow', { 
mam 7 
Prioe s "Os 
totalprice : '0°' 
1); 
var rows = $odbox.datagrid('getRows'); 
// 让 添加 的 行 处 于 可 编辑 状态 
$odbox.datagrid('beginEdit', rows.length - 1); 


} 

在 函数 addOrderDetail 中 ， 使 用 了 Datagrid 控件 的 appendRow 方法 ， 在 Datagrid 控件 
的 尾部 添加 一 个 记录 行 ， 同 时 对 新 增 行 的 num、price 和 totalprice 三 列 进行 初始 化 。 然 后 使 
用 Datagrid 控件 的 beginEdit 方法 ， 将 新 增 行 设置 为 可 编辑 状态 。 

2. 删除 订单 明细 


在 Datagrid 控件 中 ， 选 中 要 删除 的 记录 (支持 多 选 )， 单 击 删 除 订单 明细 按钮 ， 可 将 选择 
的 记录 行 从 控件 上 清除 , 单 击 删除 订单 明细 按钮 时 ,会 触发 一 个 onclick 事件 ,通过 JavaScript 
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函数 removeOrderDetail 来 处 理 该 事件 。 函 数 removeOrderDetail 的 代码 如 下 : 
// 在 datagrid 中 删除 记录 行 


function removeOrderDetail() { 
// 获取 所 选择 的 行 记录 
Var rows = $Sodbox.datagrid('getSelections') 7 
if (rows.length > 0) { 
// 获取 “订单 金额 ”文本 域 的 值 
Var create orderprice = 
$("#create orderprice") .textbox("getValue"); 
// 遍历 选中 的 行 记录 ， 以 更 新 订单 金额 
for (var i = 0; i < rows.length; i++) { 
var index = $odbox.datagrid!('getRowIndex', rows[i]); 
va totalpriceEd = $('#o0odbox') .datagrid('getEditor', { 
index: index, 
field: 'totalprice'" 
1D; 
create orderprice = create orderprice 一 
Number ($ (totalpriceEd.target) .numberbox('getValue')); 
$odbox.datagrid('deleteRow', index); 
} 
$("#create orderprice") .textbox ("setValue",create orderprice); 
} else { 
$.messager.alert(' 提 示 '，' 请 选择 要 删除 的 行 '，'info'); 
3 
} 


在 函数 removeOrderDetail 中 ， 首 先 使 用 Datagrid 控件 的 getSelections 方法 获取 所 选择 
的 行 记录 ， 然 后 获取 订单 金额 文本 域 的 值 ， 再 遍历 选中 的 行 记录 ， 以 更 新 订单 金额 。 


3. 保存 订单 


填写 订单 和 订单 明细 信息 后 ， 单 击 保存 订单 按钮 ， 会 触发 一 个 onclick 事件 ， 通 过 
JavaScript 函数 saveorder 来 处 理 该 事件 。 函 数 saveorder 的 代码 如 下 : 


// 保存 订单 
function saveorder() { 
// 获取 订单 客户 
var uid = $("#create uid") .combobox ("getValue"); 
if (uid==0) { 
$.messager.alert (' 提 示 '，' 请 选择 客户 名 称 '，'info'); 
} else { 
// 取消 datagria 控件 的 行 编辑 状态 
create_endEdit () 7 


// 定义 orderinfo 存放 订单 主 表 数 据 


var orderinfo = []; 
// 获取 订单 时 间 
Var ordertime = $("#create ordertime") .datebox ("getValue"); 
// 获取 订单 状态 
Var status = $("#create status") .combobox ("getValue"); 
// 获取 订单 金额 
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Var orderprice = $("#create orderprice") .textbox("getValue"); 


orderinfo.push({ 
ordertime : ordertime, 
uid s Vidy 
status 2 Statusy 
orderprice : orderprice 
Ds; 
// 获取 订单 明细 ( 即 datagrid 控件 中 的 行 记录 ) 
if ($odbox.datagrid('getChanges') .length) { 
// 获取 datagrid 控件 中 插入 的 记录 行 
var inserted = $odbox.datagrid('getChanges', "inserted"); 
// 获取 aatagrid 控件 中 删除 的 记录 行 
va deleted = $odbox.datagrid('getChanges', "deleted"); 
// 获取 datagrid 控件 中 更 新 的 记录 行 
va updated = $odbox.datagrid('getChanges', "updated"); 
// 定义 effectRow, 保 存 inserted 和 orderinfo 
Var effectRow = new Object (); 
if (inserted.length) { 
effectRow["inserted"] = JSON.stringify(inserted); 
} 
effectRow["orderinfo"] = JSON.stringify(orderinfo); 
// 提交 请 求 
$.post( 
"orderinfo/commitOrder", 
effectRow, 
function(data) { 
if (data == 'success') { 
$.messager.alert ("提示 "，" 创 建成 功 ! "); 
$odbox.datagrid('acceptChanges'); 
if ($('#tabs') .tabs('exists'， "创建 订单 ')) { 
$('#tabs') .tabs('close'!， ' 创 建 订单 '); 
} 
$ ("#0orderDg") .datagrid('reload'); 
} else { 
$.messager.alert ("提示 "，" 创 建 失败 ! "); 


} 


在 函数 saveorder 中 ， 首 先 调用 自 定义 的 JavaScript 函数 create_endEdit 取消 Datagrid 控 
件 的 行 可 编辑 状态 。 函 数 create_endEdit 的 代码 如 下 : 
// 取消 datagrid 控件 的 行 编辑 状态 
function create endEdit() { 
Var rows = $odbox.datagrid('getRows'); 
for (var i = 0; i < rows.length; i++) { 
$odbox.datagrid('endEdit', i); 
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在 函数 saveorder 中 ， 定 义 了 一 个 变量 orderinfo， 用 于 存放 订单 客户 、 订 单 时 间 、 订 单 
状态 和 订单 金额 等 订单 数据 。 接 着 调用 Datagrid 控件 的 getChanges 方法 ， 获 取 控 件 上 发 生 
的 改变 情况 ， 包 括 inserted、updated 和 deleted 三 种 类 型 。 由 于 Datagrid 控件 初始 时 没有 任 
何 记录 行 ， 是 通过 单 击 添加 订单 明细 按钮 创建 的 ， 因 此 即便 是 删除 或 者 修改 某 个 订单 明细 ， 
Datagrid 控件 上 发 生 的 改变 都 属于 inserted 类 型 ， 根 据 这 个 类 型 可 获取 插入 的 行 数据 ， 并 赋 
值 给 变量 inserted。 然 后 定义 一 个 对 象 effectRow, 用 于 保存 inserted 和 orderinfo, 再 通过 $.post 
将 请 求 提交 到 orderinfo/commitOrder， 这 个 url 请 求 将 映射 到 一 个 控制 器 类 中 的 一 个 方法 。 
最 后 在 com.ecpbm.controller 包 中 ， 创 建 一 个 OrderInfoController 类 ， 在 类 中 编写 一 个 
commitOrder 方法 ， 代 码 如 下 : 


Package com.ecpbm.controller; 


Q@Controller 
@RequestMapping ("/orderinfo") 
public class OrderIinfoController { 
@Autowired 
OrderInfoService orderIinfoService; 
@Autowired 
UserInfoService userInfoService; 
@Autowired 
ProductIinfoService productInfoService; 
// 保存 订单 
@ResponseBody 
@RequestMapping (value = "/commitOrder") 
public String commitOrder (String inserted, String orderinfo) 
throws JsonParseException, JsonMappingException, IOException { 
try { 
// 创建 objectMapper 对 象 , 实现 JavaBean 和 JSON 的 转换 
ObjectMapper mapper = new ObjectMapper (); 
// 设置 输入 时 忽略 在 JSON 字符 串 中 存在 但 Java 对 象 实际 没有 的 属性 
mapper.disable (DeserializationFeature.FAIL ON _ UNKNOWN PROPERTIES); 
mapper .configure (SerializationFeature.FAIL ON EMPTY BEANS, false); 
// 将 json 字符 串 orderinfo 转换 成 JavaBean 对 象 (订单 信息 ) 
OrderInfo oi = mapper.readValue (orderinfo, 
OrderInfo[] .class) [0]; 
// 保存 订单 信息 
orderInfoService.addorderInfo (oi); 
// 将 json 字符 串 转换 成 List<orderDetail> 和 集合 (订单 明细 信息 ) 
List<OrderDetail> odList = mapper.readValue (inserted, new 
TypeReference<ArrayList<OrderDetail>>() { 
1D); 
// 给 订单 明细 对 象 的 其 他 属性 赋值 
for (OrderDetail od : odList) { 
od.setOidl(oi.getId()); 
// 保存 订单 明细 
orderIinfoService.addorderDetail (od); 
$ 
return "success"; 
} catch (Exception e) { 
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return "failure"7 


} 

</script> 

在 OrderInfoController 类 中 ， 通 过 @Controller 注解 指示 该 类 是 一 个 控制 器 ， 通 过 
(@RequestMapping 注解 将 用 户 对 orderinfo/commitOrder 这 个 url 的 请 求 映 射 到 commitOrder 
方法 。commitOrder 方法 有 两 个 String 类 型 的 参数 inserted 和 orderinfo， 用 于 封装 前 端 页 面 
传递 来 的 参数 。 

在 commitOrder 方法 中 ， 首 先 创建 ObjectMapper 对 象 ， 用 于 实现 JavaBean 和 JSON 的 
转换 ， 并 设置 输入 时 忽略 在 JSON 字符 串 中 存在 但 Java 对 象 实际 没有 的 属性 。 然 后 将 JSON 
字符 串 orderinfo 转换 为 OrderInfo 对 象 oi( 对 应 订单 信息 ), 并 调用 业务 接口 OrderInfoService 
中 的 addOrderInfo 方法 ， 将 订单 信息 保存 到 数据 表 order info。 

将 JSON 字符 串 inserted 转换 成 List<OrderDetail> 集 合 对 象 odList( 对 应 订单 明细 ), 并 对 
集合 odList 进行 遍历 。 每 次 遍历 时 ， 先 为 当前 订单 明细 对 象 设置 关联 的 订单 id 号 ， 再 调用 
业务 接口 OrderInfoService 中 的 addOrderDetail 方法 ， 将 订单 明细 信息 保存 到 数据 表 
order_detail。 

如 果 执 行 成 功 , 则 向 前 端 页 面 发 送 success, 否则 发 送 failure。 在 前 端 页 面 createorder.jsp 
中 , 函数 saveorder 会 对 返回 值 进行 判断 , 如 果 成 功 , 则 关闭 创建 订单 标签 页 , 再 调用 Datagrid 
控件 的 reload 方法 重新 获取 数据 源 以 更 新 数据 ， 如 果 失 败 ， 则 提示 错误 信息 。 


19.9.2 ”查询 订单 


在 admin.jsp 页 面 中 , 单 击 Tree 控件 上 的 查询 订单 结 点 ,打开 订单 查询 页 searchorder.jsp， 
如 图 19-12 所 示 。 


19-12， 订单 查询 页 


在 订单 查询 页 中 ， 可 根据 订单 编号 、 客 户 名 称 、 订 单 状 态 和 订单 时 间 进 行 查询 ， 查 询 
表单 布局 代码 如 下 : 


@< ER 
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<!-- 查询 表单 --> 
searchOrderTb" style 
<form id="searchOrderForm"> 


padding:2px 5px;"> 


<div style="padding:3px"> 
订单 编号 snbsp;<input Class="easyui-textbox”name="Search oid" 
id="search oid" style="width:110px" /> 
</div> 
<div style="padding:3px"> 
客户 名 称 gnbsp; <input style="width:11l5px;" id="search uid" 
"” name="search uid" 


class="easyui-combobox" value= 

data-options="valueField:"'id',textField:'userName', 
url:'userinfo/getValidUser'">&gnbsp; &nbsp; gnbsp; 

订单 状态 snbsp;<select id="search status" 

class="easyui-combobox" name="search status" style="width:115px;"> 

<option value= 请 选择 " selected> 请 选择 </option> 

<option value=" 未 付款 "> 未 付款 </option> 

<option value=" 已 付款 "> 已 付款 </option> 

<option value=" 待 发 货 "> 待 发 货 </option> 

<option value=" 已 发 货 "> 已 发 货 </option> 

<option value=" 已 完成 "> 已 完成 </option> 

</select>gnbsp; gnbsp; gnbsp; 订单 时 间 gnbsp;<input 
class="easyui-datebox" name="orderTimeFrom" id="orderTimeFrom" 
style="width:11l5px;" /> ~ <input class="easyui-datebox" name="orderTimeTo" 
id="orderTimeTo" style="width:1l5px;" /> <a href="javascript:void(0)" 
class="easyui-linkbutton" iconCls="icon-search" plain="true" 
onclick="searchorderInfo () ;"> 查 找 </a> 
</div> 
</form> 

</div> 


在 订单 查询 页 中 ， 使 用 了 Easy UI Datagrid 控件 来 显示 订单 列表 。 为 此 ,创建 了 一 个 id 
为 orderDg 的 <table> 标 签 ， 并 将 其 easyui-datagrid 属性 设置 为 easyui-datagrid， 如 下 所 示 : 


<table id="orderDg" class="easyui-datagrid"></table> 

为 了 给 Datagrid 控件 提供 工具 创建 了 一 个 id 为 orderTb 的 <div> 标 签 。 在 <div> 标 签 
中 ， 定 义 了 两 个 <a> 标 签 ， 将 它们 的 class 属性 都 设置 为 easyui-linkbutton， 将 这 两 个 <a> 标 签 
创建 为 查看 明细 和 删除 订单 两 个 链接 按钮 ， 代 码 如 下 : 


orderTb" style="padding:2px 5pX7"> 
<a href="javascript:void(0)" class="easyui-linkbutton™" 
iconcl true” onclick="editorder () ;"> 查 看 明细 </a> 
<a href="javascript:void(0)" class="easyui-linkbutton" 
iconCls="icon-remove" onclick="removeOrder();" plain="true"> 删 除 订单 


"icon-edit" plai: 


</a> 
</div> 


通过 JavaScript 对 id 为 orderDg 的 创建 为 Easy UI 的 Datagrid 控件 的 <table> 标 签 进行 初 
始 化 ， 代 码 如 下 : 


2 
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<script type="text/javascript"> 


$(function() { 
$('#orderDg') .datagrid({ 


singleSelect : false, 
url : "orderinfo/list'，// 为 aatagrid 设置 数据 源 
queryParams : {}，// 查 询 条 件 
pagination : true，// 启 用 分 页 
pageSize : 5，// 设 置 初始 每 页 记录 数 (页 大 小 ) 
pageList : [ 5，10，15 ]，// 设 置 可 供 选择 的 页 大 小 
rownumbers : true，// 显 示 行 号 
fit : true，// 设 置 自 适应 
toolbar : '#orderTb'，// 为 datagrid 添加 工具 栏 
header : '#searchorderTb'，// 为 aatagrid 标题 头 添加 搜索 栏 
columns : [ [ { // 编 辑 aatagrid 的 列 

title : "序号 

丘 玫 四 于 直下 全 2 

align : "Center'v 

checkbox : true 
人 

a 

title : "订单 客户 ,， 


formatter : function(value, row, index) 
if (row.ui) { 

return row.ui.userName; 
} else { 


return value; 


width : 100 

| 
field : 'status', 
title : ' 订 单 状 态 '， 
width : 80 

| 
field : 'ordertime', 
title : ' 订 单 时 间 '， 
width : 100 

7 | 
field £ "orderprice", 
title : ' 订 单 金额 '， 
width : 100 


Ds; 


</script> 


{ 


Datagrid 控件 的 初始 化 是 通过 相关 属性 设置 来 完成 的 , singleSelect 属性 用 于 设置 是 否 单 
选 , 这 里 为 false, 表示 人 允许 多 选 ; queryParams 属性 用 于 设置 传递 到 后 台 控 制 器 的 参数 列表 ， 
这 里 先 设置 为 人 f}; pagination 属性 用 于 设置 是 否 分 页 ， 这 里 为 tue， 表 示人 允 许 分 页 ; pageSize 


< Sa a 
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属性 用 于 设置 初始 每 页 记录 数 ， 这 里 为 5; pageList 用 于 设置 可 供 选 择 的 每 页 记录 数 ， 这 里 
为 [5, 10, 15 ]， 表 示 可 以 选择 每 页 显示 5、10 或 15 条 记录 ; rownumbers 属性 用 于 设置 是 否 
显示 行 号 , 这 里 为 rue, 表示 显示 行 号 ; fit 属性 用 于 设置 是 否 自 适应 显示 数据 , 这 里 为 tue， 
允许 自 适 应 显示 ; toolbar 属性 用 于 设置 工具 栏 ， 这 里 为 #orderTb， 表 示 要 将 id 为 orderTb 
的 <div> 标 签 作为 Datagrid 控件 的 工具 栏 ; header 属性 用 于 设置 表 头 , 这 里 为 #searchOrderTb， 
表示 要 将 id 为 searchOrderTb 的 <div> 标 签 作为 Datagrid 控件 的 标题 头 ; columns 属性 用 于 设 
置 Datagrid 控件 显示 的 列 ，url 属性 用 于 指定 Datagrid 控件 的 数据 源 ， 这 里 为 orderinfo/list， 
这 个 url 请 求 将 映射 到 控制 器 类 OrderInfoController 中 的 一 个 方法 。 在 OrderInfoController 
类 中 编写 list 方法 ， 根 据 查询 条 件 分 页 获取 订单 列表 ， 代 码 如 下 : 
// 分 页 显示 
@RequestMapping(value = "/list") 
@ResponseBody 
public Map<String, Object> list(Integer page, Integer rows, OrderInfo 
orderInfo) { 
// 初始 化 一 个 分 页 类 对 象 pager 
Pager pager = new Pager(); 
pager.setCurPage (page); 
pager.setPerPageRows (rows); 
// 创建 对 象 params， 用 于 封装 查询 条 件 
Map<String, Object> params = new HashMap<string, Object>(); 
params.put ("orderInfo", orderIinfo); 
// 获取 满足 条 件 的 订单 总 数 
int totalCount = orderInfoService.count (params) 
// 获取 满足 条 件 的 订单 列表 
List<OrderInfo> orderinfos = orderInfoService.findorderInfo (orderInfoy， 
pager); 
// 创建 result 对 象 ， 保 存 查询 结果 数据 
Map<String, Object> result = new HashMap<String, Object>(2); 
result.put ("total", totalCount); 
result.put ("rows", orderinfos); 
return result; 


} 

通过 在 list 方法 上 标注 @RequestMapping 注解 ， 将 用 户 对 orderinfo/list 这 个 url 的 请 求 
映射 到 list 方法 。list 方法 有 三 个 参数 ， 一 个 是 OrderInfo 类 参数 orderInfo， 用 于 封装 前 端 页 
面 传 递 来 的 查询 条 件 。 另 外 两 个 参数 是 page 和 rows， 用 于 接收 从 Datagrid 控件 传递 来 的 页 
码 和 每 页 显示 的 记录 数 。 

在 list 方法 中 ， 首 先 初始 化 一 个 分 页 类 对 象 pager， 给 其 设置 curPage 和 perPageRows 
两 个 属性 值 。 然 后 创建 Map<String，Object> 类 型 的 对 象 params， 用 于 封装 查询 条 件 。 接 着 
依次 调用 业务 接口 OrderInfoService 中 的 count 方法 获取 满足 条 件 的 订单 总 数 ， 调 用 
findOrderInfo 方法 获取 满足 条 件 的 订单 列表 。 再 创建 Map<String, Objec 人 > 类 型 的 对 象 result， 
保存 查询 结果 数据 。 最 后 将 返回 结果 转 为 JSON 格式 ， 以 字符 串 的 形式 发 送 到 前 端 页 面 
searchorder.jsp， 为 Datagrid 控件 提供 数据 源 。 

初始 时 Datagrid 控件 显示 所 有 订单 记录 ， 如 果 在 查询 表单 中 输入 查询 条 件 ， 单 击 查找 
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按钮 ， 将 执行 JavaScript 函数 searchOrderInfo， 代 码 如 下 : 
// 查询 订单 


function searchOrderInfo() { 


var oid = $('#search oid') .val(); 
va status = $('#search status') .combobox("getValue"); 
var uid = $('#search uid') .combobox ("getValue"); 
Var orderTimeFrom = $("#orderTimeFrom") .datebox ("getValue"); 
Var orderTimeTo = $("#orderTimeTo") .datebox ("getValue"); 
$('#orderDg') .datagrid('load', { 

id : oid, 

status : status, 


uid : uid, 
orderTimeFrom : orderTimeFrom, 
orderTimeTo : orderTimeTo 
1); 
} 


在 函数 searchOrderInfo 中 ， 首 先 获取 用 户 输 入 的 查询 条 件 ， 然 后 调用 Datagrid 控件 的 
load 方法 , 再 次 向 控制 器 类 OrderInfoController 中 的 list 方法 发 送 请 求 ， 并 将 参数 传递 过 去 。 
以 查询 客户 名 称 为 john 的 订单 为 例 ， 执 行 查询 后 ， 结 果 如 图 19-13 所 示 。 


查询 订单 x 
订单 妨 号 
喜 户 全 你 john 订单 状态 | 请 远近 订 章 时 间 到 = 四 


AP 直 看 明 当 ” 回 制约 订单 


】 订单 可 户 订单 状态 。 订单 时 间 订单 会晤 
1 john By 款 2018-05-09 00:00:00.0 。 12997 
john 未 付款 2018-06-26 00:00:00.0 30572 
5 条 11 | 闪 1 页 o 黑 示 1 到 2, 共 2 记 棒 


19-13 ”查询 客户 john 的 订单 


19.9.3 ”删除 订单 


在 订单 查询 页 searchorder.jsp 中 ， 选 中 Datagrid 控件 中 的 某 条 记录 ， 再 单 击 工具 栏 中 的 
删除 订单 按钮 ， 可 将 订单 和 关联 的 明细 信息 删除 。 单 击 删除 订单 按钮 时 ， 将 执行 JavaScript 
函数 removeOrder， 代 码 如 下 : 


// 删除 订单 
function removeOrder() { 

// 获取 选中 的 订单 记录 行 

Var rows = $("#orderDg") .datagrid('getSelections'); 

if (rows.length > 0) { 

$.messager.confirm('Confirm', ' 确 认 要 删除 么 ?2'，function(r) { 
4£ (ry) { 
var ids = 7 
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// 获取 选中 订单 记录 的 订单 ia， 保存 到 ids 中 
for (var i = 0; i < rows.length; i++) { 
ids += rows[i].id + ","s 


} 

// 发 送 请 求 

$.post('orderinfo/deleteOrder', { 
oids : ids 


}, function(result) { 
if (result.success == 'true') { 
$("#orderDg") .datagrid('reload'); 
$.messager.show ({ 
title : ' 提 示 信 息 '， 
msg : result.message 
1); 
} else { 
$.messager.show({ 
title : ' 提 示 信 息 '， 
msg : result.message 
Ds; 
} 


}, "json'); 


]) 7 
} else { 
$.messager.alert (' 提 示 '，' 请 选择 要 删除 的 行 '，'info'); 


} 


在 函数 removeOrder 中 , 首先 获取 Datagrid 控件 中 选中 的 订单 记录 , 然后 将 它们 的 订单 
编号 以 逗号 分 隔 ， 保 存 到 变量 ids 中 ， 再 使 用 $.post 发 送 请 求 orderinfo/deleteOrder， 同 时 将 
参数 oids 传递 过 去 ， 这 个 url 请 求 将 映射 到 控制 器 类 OrderInfoController 中 的 一 个 方法 。 接 
下 来 ， 在 OrderInfoController 类 中 编写 一 个 deleteOrder 方法 ， 代 码 如 下 : 


// 删除 订单 
@ResponseBody 
@RequestMapping (value = "/deleteOrder", produces = 
"text/html;charset=UTF-8") 
public String deleteOrder (String oids) { 
String str = "~" 
try { 
oids = oids.substring(0, oids.length() - 1); 
String[] ids = oids.split(","); 
for (String id : ids) { 
orderInfoService.deleteOrder (Integer .parseInt (id)); 
水 
str = "{\"success\":\"true\", \"message\":\" 删 除 成 功 ! \"}"; 
} catch (Exception e) { 
str = "{\"success\":\"false\", \"message\":\" 删 除 失败 ! \"}"; 
A 


return str; 
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通过 在 deleteOrder 方法 上 标注 @RequestMapping 注解 ， 将 用 户 对 orderinfo/deleteOrder 
这 个 url 的 请 求 映射 到 deleteOrder 方法 。deleteOrder 方法 有 一 个 String 类 型 的 参数 oids,， 用 
于 封装 从 前 端 页 面 传递 来 的 以 逗号 分 隔 的 订单 编号 。 

在 deleteOrder 方法 中 ， 循 环 调用 了 业务 接口 OrderInfoService 中 的 deleteOrder 方法 ， 
根据 订单 编号 删除 订单 信息 。 最 后 根据 执行 情况 ， 向 前 端 页 面 发 送 成 功 或 失败 信息 。 在 前 
端 页 面 searchorder.jsp 中 , 根据 结果 进行 判断 , 如 果 执 行 成 功 , 则 调用 Datagrid 控件 的 reload 
方法 ， 重 新 向 控制 器 类 OrderInfoController 的 list 方法 发 送 请 求 ， 以 更 新 数据 源 。 


19.9.4 查看 订单 明细 


在 订单 查询 页 searchorder.jjsp 中 , 选中 Datagrid 控件 中 的 某 条 记录 , 单 击 工具 栏 中 的 “ 查 
看 明细 ”按钮 ， 将 执行 JavaScript 中 的 editOrder 函数 ， 代 码 如 下 : 
// 查看 明细 


function editOrder() { 
var rows = $("#orderDg") .datagrid('getSelections'); 
if (rows.length > 0) { 
Var row = $("#orderDg") .datagrid("getSelected"); 
if ($('#tabs') .tabs('exists', ' 订 单 明 细 ')) { 
$('#tabs') .tabs('close'， ' 订 单 明 细 '); 


} 

$('#tabs') .tabs('add', { 
title : "订单 明细 "， 
href : 'orderinfo/getOrderInfo?oid=' + row.id, 
closable : true 

]) 

jelse { 
$.messager.alert (' 提 示 '，' 请 选择 要 修改 的 订单 '，'info'); 
} 


在 函数 editOrder 中 ， 首 先 获取 Datagrid 控件 中 选中 的 行 ， 然 后 发 送 请 求 
orderinfo/getOrderInfo， 这 个 url 请 求 将 映射 到 控制 器 类 OrderInfoController 中 的 一 个 方法 ， 
同时 将 参数 oid 传递 给 这 个 方法 。 接 下 来 ， 在 OrderInfoController 类 中 编写 getOrderInfo 方 
法 ， 代 码 如 下 : 

// 根据 订单 id 号 获取 要 查看 的 订单 对 象 ， 再 返回 订单 明细 页 

@RequestMapping ("/getOrderInfo") 

public String getOrderInfo (String oid, Model model) { 

OrderInfo oi = 
orderIinfoService.getOrderIinfoById(Integer.parseInt (oid)); 


model.addAttribute ("oi", oi); 
return "orderdetail"; 


} 


通过 在 getOrderInfo 方 法 上 标注 @RequestMapping 注解 ,将 用 户 对 orderinfo/getOrderInfo 
这 个 url 的 请 求 映 射 到 getOrderInfo 方法 。getOrderInfo 方法 有 两 个 参数 ,一 个 是 String 类 型 
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的 参数 oid， 用 于 封装 从 前 端 页 面 通过 URL 传递 来 的 订单 编号 ， 另 一 个 是 Model 类 型 的 参 
数 model， 用 于 向 跳 转 到 的 订单 明细 页 传递 数据 。 

在 getOrderInfo 方法 中 ， 调 用 业务 接口 OrderInfoService 中 的 getOrderInfoById 方法 ， 
获取 指定 编号 的 订单 对 象 , 再 将 订单 对 象 oi 添加 到 Model 对 象 中 。getOrderInfo 方法 执行 结 
束 后 ， 跳 转 到 订单 明细 页 orderdetailjsp。 

在 订单 明细 页 orderdetailjsp 中 ， 可 以 从 Model 对 象 中 取出 之 前 存放 的 订单 对 象 ， 再 将 
订单 信息 和 订单 明细 信息 显示 出 来 。 

订单 信息 是 在 一 个 id 为 editordertb 的 <div> 标 签 中 显示 的 ， 如 下 所 示 : 


<div id="editordertb" style="padding: 2px 5px;"> 
<div id="editdivOorderIinfo"> 
<div style="padding: 3px"> 
客户 名 称 gnbsp; <input style="width: 11l5px;" id="edit uid" 
class="easyui-textbox" name="edit uid" readonly="readonly" 
value="$ {requestScope.oi.ui.userName }"> 
&nbsp; gnbsp’; Enbsp; gnbsp; gnbsp; Enbsp; 
订单 金额 enbsp; <input type="text" name="edit orderprice" 
id="edit orderprice" value="${requestSscope.oi.orderprice }" 
class="easyui-textbox" readonly="readonly" style="width: ll5px" 
/>&nbsp; gnbsp; 
</div> 
<div style="padding: 3px"> 
订单 日 期 enbsp; <input type="text" name="edit ordertime" 
readonly="readonly" id="edit ordertime" 
value="$ {requestScope.oi.ordertime }" class="easyui-datebox" 
style="width: 115px"” /> gnbsp;&nbsp; 
&nbsp; &nbsp; 订单 状态 enbsp; <input id="edit status" 
class="easyui-textbox" name="edit status" style="width: 115px;" 
readonly="readonly" value="${requestScope.oi.status }"> 


</div> 
</div> 
</div> 
在 上 述 <div> 标 签 中 ， 客 户 名 称 、 订 单 金额 、 订 单 日 期 和 订单 状态 这 些 订单 信息 都 是 从 
request 域 中 的 oi 对 象 获取 的 。 


订单 明细 信息 是 通过 Easy UI 的 Datagrid 控件 显示 的 , 为 此 在 订单 明细 页 orderdetailjsp 
中 ， 定 义 了 一 个 id 为 editodbox 的 <table> 标 签 。 

接 下 来 ， 通 过 JavaScript 对 id 为 editodbox 的 <table> 标 签 进行 初始 化 ， 以 显示 订单 明细 
信息 ， 代 码 如 下 : 


<script type="text/javascript"> 
var $editodbox = $('#editodbox'); 
$(function() { 
$editodbox.datagrid({ 
url : "orderinfo/getOrderDetails?oid= 
S$frequestScope.oi.id }', 
rownumbers : true, 
singleSelect : false, 
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fit ® truvey 
toolbar : '#editordertb', 
columns : [ [ 


Frield ss "pid"y 
title : "商品 名 称 '， 
width : 300, 
formatter : function(value, row, index) { 
if (row.pi) { 
return row.pi.name; 
} else { 
return value; 


field s "price'y 
title "单价 
width : 80 


field : 'num', 
title : ' 数 量 '， 
width : 50 


field : 'totalprice', 
title : ' 小 计 '， 
width : 100 


1D); 
3 
</script> 


Datagrid 控件 的 数据 源 是 通过 url 属性 指定 的 ， 这 里 设置 为 orderinfo/getOrderDetails， 
这 个 url 请 求 将 映射 到 控制 器 类 OrderInfoController 中 的 一 个 方法 ， 并 将 参数 oid 传递 给 该 
方法 。 接 下 来 在 OrderInfoController 类 中 ， 编 写 getOrderDetails 方法 ， 代 码 如 下 : 


// 根据 订单 ia 号 获取 订单 明细 列表 
@RequestMapping ("/getOrderDetails") 
@ResponseBody 
public List<OrderDetail> getOrderDetails (String oid) { 
List<OrderDetail> ods = 
orderIinfoService.getOrderDetailByOid(Integer.parseInt (oid)); 
for (OrderDetail od : ods) { 
od.setPrice (od.getPi() .getPrice()); 
od.setTotalprice(od.getPi() .getPrice() * od.getNum()); 
} 
return ods; 


} 


在 getOrderDetails 方法 中 ， 调 用 了 业务 接口 OrderInfoService 中 的 getOrderDetailByOid 
方法 ， 根 据 订单 编号 获取 订单 明细 信息 列表 。 然 后 对 这 个 列表 进行 遍历 ， 将 关联 的 商品 编 
号 、 价 格 和 小 计 等 信息 保存 到 每 一 个 订单 明细 对 象 中 。 再 通过 @ResponseBody 注解 自动 将 
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List<OrderDetail> 类 型 的 ods 进行 JSON 格式 转换 ， 发 送 到 前 端 页 面 orderdetail.jsp， 作 为 页 


面 中 Datagrid 控件 的 数据 源 。 
在 订单 查询 页 searchorderjsp 中 ， 选 中 一 条 订单 记录 ， 再 单 击 查看 明细 按钮 ， 可 以 看 到 


这 个 订单 的 明细 信息 ， 如 图 19-14 所 示 。 


要 C | © localhost:8080/ecpbm/adminjsp 


Er 


吾 广 大 称 | bm 订 兰 立 梧 | 105570 


订单 昌 其 [2018-05-12 。 中] 林 音 枯 杰 | 才 人 阮 

EE i 
1 AppleMJVE2CH/A 6488 
2 ThinkpadE450C(20EHO001CD) 4199 


powered by mlaoyong 


图 19-14 ”查看 订单 明细 


19.10 客户 管理 
客户 管理 包括 客户 列表 显示 、 查 询 客户 、 启 用 和 禁用 客户 功能 。 


19.10.1 客户 列表 显示 


在 admin.jsp 页 面 中 ， 单 击 客户 管理 下 的 客户 列表 结 点 ， 打 开 客 户 列表 页 userlistjsp， 
如 图 19-15 所 示 。 


js 
201307-14 
201307-14 
20150016 
2015.09116 
20150016 


1 
2 
3 上 
4 
s 


19-15 ”客户 列表 页 


在 userlistjsp 页 面 中 ,使 用 了 Easy UI 的 Datagrid 控件 来 显示 客户 列表 ， 该 控件 是 通过 
id 为 userListDg 的 <table> 标 签 创建 的 ， 其 定义 如 下 : 


Dl ee > @ 
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<table id="userListDg" class="easyui-datagrid"></table> 


在 页 面 中 ， 还 定义 了 一 个 id 为 userListTb 的 <div> 标 签 ， 并 在 <div> 标 签 中 定义 了 启用 
客户 和 禁用 客户 两 个 链接 按钮 ， 用 作 Datagrid 控件 上 的 工具 栏 ， 代 码 如 下 : 
<!-- 创建 工具 栏 --> 


<div id="userListTb" style="padding:2px 5px;"><a href="javascript:void(0)" 


class="easyui-linkbutton" iconCls="icon-edit" plain="true" 
onclick="SetIsEnableUser (1);"> 启 用 客户 </a> 


<a href="javascript:void(0)" class="easyui-linkbutton" 
iconCls="icon-remove" onclick="SetIsEnableUser (0);" plain="true"> 禁 用 客户 
</a> 

</div> 


接着 定义 了 一 个 id 为 searchUserListTb 的 <div> 标 签 ， 在 <div> 标 签 中 定义 了 一 个 id 为 
searchUserListForm 的 表单 ,在 这 个 表单 中 定义 了 一 个 客户 名 称 文本 框 和 一 个 查询 链接 按钮 ， 
用 作 Datagrid 控件 上 的 搜索 栏 ， 代 码 如 下 : 


<!-- 创建 搜索 栏 --> 
<div id="searchUserListTb" style="padding:4px 3PX7 "> 
<form id="searchUserListForm"> 
<div style="padding:3px "> 
客户 名 称 &nbsp; gnbsp; <input class="easyui-textbox" 
name="search userName" id="search userName" style="width:11l0px" /><a 
href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" 
plain="true" onclick="searchUserInfo() ;"> 查 找 </a> 
</div> 
</form> 
</div> 


最 后 通过 JavaScript 对 id 为 userListDg 的 创建 为 Easy UI 的 Datagrid 控件 的 <table> 标 签 
进行 初始 化 ， 代 码 如 下 : 


<script type="text/javascript"> 
$(function() { 
$('#userListDg') .datagrid({ 
singleSelect : false, 
url : 'userinfo/list', 
queryParams : {}，// 查 询 条 件 
pagination : true，// 启 用 分 页 
pagesize : 5，// 设 置 初始 每 页 记录 数 (页 大 小 ) 
pageList : [ 5，10，15 ]，// 设 置 可 供 选 择 的 页 大 小 
rownumbers : true，// 显 示 行 号 
fit : true，// 设 置 自 适应 
toolbar : '#userListTb'，// 为 daatagrid 添 加 工具 栏 
header : '#searchUserListTb'，// 为 datagrid 标题 头 添加 搜索 栏 
columns : [ [ { // 编 辑 datagrid 的 列 


itle 2 记号" 
br 
Slign 二 center's 


checkbox : true 
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field : "userName'yv 
title : "登录 名 "， 
width : 100 


field : "realName'yv 
title : "真实 姓名 '， 
width : 80 

jy 
ELeL £ "Ser "ys 
title : ' 性 别 '， 


width : 100 


field : "address', 
title :' 住 址 '， 
width : 200 
时 二 
field : 'email', 
title : "邮箱 '， 
width : 150 
趟 二 
field : 'regDate', 
title : "注册 日 期 '， 
width : 100 
过 
field : "status'v 
title : "客户 状态 '， 
width : 100, 
formatter : function(value, row, index) { 
if (row.status==1) { 
return "启用 "; 
} else { 
return "禁用 "; 
} 


Ds; 
Ds; 


</script> 


Datagrid 控件 的 初始 化 是 通过 相关 属性 设置 来 完成 的 , singleSelect 属性 用 于 设置 是 否 单 
选 , 这 里 为 false, 表示 人 允许 多 选 ; queryParams 属性 用 于 设置 传递 到 后 台 控 制 器 的 参数 列表 ， 
这 里 先 设置 为 人 {}; pagination 属性 用 于 设置 是 否 分 页 ， 这 里 为 tue， 表 示人 允 许 分 页 ; pageSize 
属性 用 于 设置 每 页 初始 记录 数 ， 这 里 为 5; pageList 用 于 设置 可 供 选 择 的 每 页 记录 数 ， 这 里 
为 [5, 10, 15 ]， 表 示 可 以 选择 每 页 显示 5、10 或 15 条 记录 ; rownumbers 属性 用 于 设置 是 否 
显示 行 号 ,这 里 为 rue, 表示 显示 行 号 ; fit 属性 用 于 设置 是 否 自 适应 显示 数据 , 这 里 为 true， 
允许 自 适 应 显示 ; toolbar 属性 用 于 设置 工具 栏 , 这 里 为 userListTb, 表示 要 将 id 为 userListTb 
的 <div> 标 签 作为 Datagrid 控件 的 工具 栏 ，header 属性 用 于 设置 Datadrid 控件 的 标题 头 ， 这 
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里 为 #searchUserListTb, 表示 要 将 id 为 searchUserListTb 的 <div> 标 签 作为 Datagrid 控件 的 标 
题 头 ，columns 属性 用 于 设置 Datagrid 控件 显示 的 列 ; url 属性 用 于 指定 Datagrid 控件 的 数 
据 源 , 这 里 为 userinfo/list, 这 个 url 请 求 将 映射 到 控制 器 类 UserInfoController 中 的 一 个 方法 。 
接 下 来 ， 在 UserInfoController 类 中 编写 userlist 方法 ， 根 据 查 询 条 件 分 页 获取 客户 列表 ， 代 
码 如 下 : 


@RequestMapping ("/list" 


@ResponseBody 
public Map<String, Object> userlist(Integer page, Integer rows, UserInfo 
userInfo) { 

// 创建 分 页 类 对 象 

Pager pager = new Pager() 

pager.setCurPage (page); 

pager.setPerPageRows (rows); 

// 创建 对 象 params， 封 装 查询 条 件 

Map<String, Object> params = new HashMap<String, Object>(); 

params.put ("userIinfo", userIinfo); 

// 根据 查询 条 件 ， 获 取 客户 记录 数 

int totalCount = UserInfoService.count (params); 

// 根据 查询 条 件 ， 分 页 获取 客户 列表 

List<UserInfo> userinfos = userIinfoService.findUserInfo (userInfo, 
pager); 

// 创建 对 象 result， 保 存 查询 结果 数据 

Map<String, Object> result = new HashMap<String, Object>(2); 

result.put ("total", totalCount); 

result.put ("rows", userinfos); 

return result; 


} 

通过 在 userlist 方法 上 标注 @RequestMapping 注解 ， 将 用 户 对 userinfo/list 这 个 url 的 请 
求 映 射 到 userlist 方法 。userlist 方法 有 三 个 参数 ， 一 个 是 UserInfo 类 参数 userInfo， 用 于 封 
装 前 端 页 面 传递 来 的 查询 条 件 。 另 外 两 个 参数 是 page 和 rows， 用 于 接收 从 Datagrid 控件 传 
递 来 的 页 码 和 每 页 显示 的 记录 数 。 

在 userlist 方法 中 , 首先 初始 化 一 个 分 页 类 对 象 pager, 给 其 设置 curPage 和 perPageRows 
两 个 属性 值 。 然 后 创建 Map<String，Object> 类 型 的 对 象 params， 用 于 封装 查询 条 件 。 接 着 
依次 调用 业务 接口 UserInfoService 中 的 count 方法 获取 满足 条 件 的 客户 总 数 ， 调 用 
findUserInfo 方法 获取 满足 条 件 的 客户 列表 。 再 创建 Map<String, Object> 类 型 的 对 象 result， 
保存 查询 结果 数据 。 最 后 将 返回 结果 转 为 JSON 格式 ， 以 字符 串 的 形式 发 送 到 前 端 页 面 
userlistjsp， 为 Datagrid 控件 提供 数据 源 。 


19.10.2 ”查询 客户 
在 userlistjsp 页 面 的 搜索 栏 中 ,输入 客户 名 称 ， 单 击 “ 查 找 ” 按钮 ， 会 根据 客户 名 称 进 


行 模糊 查询 ， 并 将 查询 结果 显示 在 Datagrid 控件 中 。 例 如 ， 在 客户 名 称 文本 框 中 输入 j， 单 
击 “ 查 找 ” 按 钮 ， 查 询 结果 如 图 19-16 所 示 。 
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客户 列表 x 


言 产 会 称 |j 人 坪 抵 


AP 局 用 客户 ”加 鞋 用 宫 户 


登录 匀 真人 性 吕 住址 部 箱 注册 日 期 
1 john 约 验 女 江 丈 计 耳 束 市 辫 起 区 wen@135.com 2013-07-14 
2 可 可 田 江东 让 南 京 市 立 起 区 b@135.com 2015-09-16 
3 上 上 男 江 节 言 南京 市 辫 武 区 a@135.com 2015-09-20 


19-16 ” 按 客户 名 模糊 查询 


单 击 “查找 ”按钮 和 时， 会 执行 JavaScript 函数 searchUserInfo， 代 码 如 下 : 


function searchUserInfo() { 
var userName = $('#search userName') .textbox("getValue"); 
$('#userListDg') .datagrid('load', { 
userName : userName 
Ds; 
} 


豆 户 状态 
局 用 
局 用 
局 用 


在 函数 searchUserInfo 中 ， 首 先 获 取 输 入 的 客户 名 称 ， 然 后 调用 Datagrid 控件 的 load 
方法 ， 这 时 会 向 后 台 服 务 器 重新 提交 userinfo/list 请 求 ， 即 再 次 执行 UserInfoController 类 中 
的 userlist 方法 。 由 于 指定 了 参数 userName， 这 个 参数 会 被 添加 到 queryParams 中 ， 并 传递 
给 userlist 方法 。 在 userlist 方法 中 ， 根 据 查 询 条 件 重新 获取 数据 ， 再 将 结果 显示 在 Datagrid 


控件 上 。 


19.10.3 ”启用 和 禁用 客户 


在 userlistjsp 页 面 中 ,选中 Datagrid 控件 中 的 若干 条 记录 , 单 击 启用 客户 或 禁用 客户 按 
钮 ， 可 以 修改 客户 的 状态 。 单 击 启用 客户 或 禁用 客户 按钮 后 ， 将 执行 JavaScript 函数 


SetIsEnableUser， 代 码 如 下 : 
// 设置 启用 或 禁用 客户 


function SetIsEnableUser(flag) { 


var rows = $("#userListDg") .datagrid('getSelections'); 
if (rows.length > 0) { 


$.messager.confirm('Confirm'，' 确 认 要 设置 么 ?',，function(r) { 


if (r) { 
var uids = ""; 
for (var i = 0; i < rows.length; i++) { 


uids += rows[i].id + ","; 
} 
$.post('userinfo/setIsEnableUser', { 
uids : uids, 
flag : flag 
}, function(result) { 
if (result.success == 'true') { 
$("#userListDg") .datagrid('reload'); 
$.messager.show({ 
title : ' 提 示 信 息 '， 
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msg : result.message 
Ds 
} else { 
$.messager.show({ 
title : ' 提 示 信 息 '， 
msg : result.message 


nD); 
} else { 
$.messager.alert(' 提 示 '，' 请 选择 要 启用 或 禁用 的 客户 '，'info'); 
3 
} 


setIsEnableUser 函数 中 有 一 个 参数 flag， 代 表 执 行 启用 还 是 禁用 操作 。 如 果 flag 为 1， 
则 执行 启用 操作 ;如 果 为 0， 则 执行 禁用 操作 。 

在 setIsEnableUser 函数 中 ， 首 先 获取 选中 行 的 客户 编号 ， 并 将 其 以 逗号 分 阳 保 存 到 变 
量 uids 中 , 然后 通过 $.post 方法 提交 请 求 userinfo/setIsEnableUser， 这 个 url 请 求 将 映射 到 控 
制 器 类 UserInfoController 中 的 一 个 方法 ， 并 将 参数 uids 和 flag 传递 给 这 个 方法 。 接 下 来 ， 
在 UserInfoController 类 中 编写 setIsEnableUser 方法 ， 代 码 如 下 : 

// 更 新 客户 状态 

@RequestMapping (value = "/setIsEnableUser", produces = 

"text/html;charset=UTF-8") 

@ResponseBody 

public String setIsEnableUser (@RequestParam(value = "uids") String 

uids,@RequestParam(value = "flag") String flag) { 

try { 
userInfoService.modifyStatus (uids.substring(0, uids.length() - 1)， 
Integer.parseInt (flag) ) 
return "{\"success\":\"true\", \"message\":\" 更 改 成 功 \"}"; 
} catch (Exception e) { 
return "{\"success\":\"false\", \"message\":\" 更 改 失败 \"}"; 
} 

} 

通过 在 setIsEnableUser 方法 上 标注 @RequestMapping 注解 ,将 用 户 对 userinfo/setIsEnableUser 
这 个 url 的 请 求 映射 到 setIsEnableUser 方法 。setIsEnableUser 方法 有 两 个 String 类 型 的 参数 
uids 和 flag， 用 来 绑 定 前 端 页 面 传递 来 的 参数 。 

在 setIsEnableUser 方法 中 , 调用 业务 接口 UserInfoService 中 的 modifyStatus 方法 , 将 数 
据 表 user_info 中 的 Status 字段 值 设置 为 1( 启 用 ) 或 0( 禁 用 )。 最 后 根据 执行 结果 ， 向 前 端 页 
面 发 送信 息 。 

在 前 端 页 面 userlist.jsp 中 ， JavaScript 函数 setIsEnableUser 根据 服务 器 的 返回 信息 进行 
判断 。 如 果 执 行 成 功 ， 则 调用 Datagrid 控件 的 reload 方法 ,重新 执行 控制 器 类 
UserInfoController 中 的 userlist 方法 ， 重 新 获取 数据 以 更 新 客户 列表 。 


< Se a 
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19.11 小 结 


本 章 基 于 Spring、Spring MVC 与 MyBatis 整合 框架 , 采用 注解 方式 并 结合 前 端 Easy UI 
框架 ， 详 细 讲 解 了 一 个 典型 的 电 商 平台 后 台 管 理 系统 的 实现 过 程 ， 系 统 的 主要 功能 包括 商 


品 管理 


、 订 单 管理 


E 和 客户 管理 ， 按 照 三 层 架构 开发 每 个 功能 模块 。 


通过 本 章 的 学 习 ， 希 望 读 者 能 够 熟练 掌握 Spring、Spring MVC 与 MyBatis 框架 整合 开 
发 的 基本 步 又、 方法 和 技巧 。 
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在 第 17 章 中 ， 以 用 户 登录 功能 为 例 ， 详 细 讲 解 了 Spring、Spring MVC 与 MyBatis 框架 
(SSM) 整 合 的 流程 。 本 章 将 使 用 SSM 整合 ， 并 结合 前 端 基于 Bootstrap 的 H+ 框架 实现 校园 
通讯 管理 系统 。 


20.1 需求 与 系统 分 析 


在 日 常生 活 中 ， 对 于 一 名 学 生来 说 ， 宿 舍 的 设备 报修 ， 需 要 上 报 给 宿 管 员 。 宿 管 员 手 
写 报修 单 ， 再 送 至 后 勤 ， 然 后 才能 派出 专业 人 员 进 行 修理 。 再 比如 ， 院 系 给 教师 发 送 通知 ， 
学 校 给 院 系 发 送 通知 ， 没 有 统一 的 平台 供 多 个 不 同 的 群体 或 者 个 体 通讯 。 学 校对 于 某 一 决 
定 让 学 生 个 体 投票 ， 又 或 者 以 院 系 为 单位 投票 时 ， 最 耗费 时 间 的 莫 过 于 清点 票数 ， 因 此 
以 往 的 消息 传递 方式 和 投票 方式 与 时 代 的 发 展 已 不 匹配 。 于 是 ， 一 种 新 式 的 通 计 
而 生 ， 这 就 是 校园 通讯 管理 系统 。 
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(3) 菜单 (或 系统 功能 模块 ) 管 理 : 对 已 有 的 菜单 进行 管理 (区 域 管理 员 角 色 权 限 的 来 源 )。 
2. 院 校 管 理 员 功能 权限 


院 校 管理 员 功 能 权限 包括 单位 管理 、Excel 批量 导入 单位 、 单 位 类 别管 理 、 角 色 管 理 和 
用 户 管理 。 

(1) 单位 管理 : 对 学 校 的 单位 (包括 学 生 、 教 师 、 宿 舍 楼 、 院 系 、 后 勤 部 门 等 某 一 个 体 
或 群体 ) 进 行 增删 改 查 。 

(2) Excel 批量 导入 单位 : 选择 角色 ， 导 入 后 自动 生成 账号 密码 (账号 形式 为 学 校 编号 _ 
单位 编号 ， 默 认 密码 为 单位 编号 )， 同 时 不 存在 的 单位 类 别 会 自动 生成 。 

(3) 单位 类 别管 理 : 单位 所 属 类 别 的 增加 、 删 除 、 修 改 和 查询 。 

(4) 角色 管理 : 对 角色 的 增加 、 删 除 、 修 改 、 查 询 ， 以 及 角色 权限 的 配置 。 

(5) 用 户 管理 : 为 已 有 的 单位 生成 账号 和 密码 ， 并 绑 定 角色 。 


3. 单位 用 户 功 能 权限 


单位 用 户 功能 权限 包括 通知 推送 、 通 知 查看 、 投 票 和 查看 投票 数据 。 
(1) 通知 推送 : 筛选 单位 或 者 群体 ， 发 送 消息 。 

(2) 通知 查看 : 查看 通知 消息 ， 点 击 查收 ， 确 认 收 到 。 

(3) 投票 : 查看 投票 消息 ， 并 选择 赞成 或 反对 票 。 

(4) 查看 投票 数据 : 查看 发 出 的 消息 或 数据 ， 数 据 分 析 。 

根据 上 述 分 析 ， 可 以 得 到 系统 的 模块 结构 ， 如 图 20-1 所 示 。 


校园 通讯 系统 
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20.2 数据库 设计 


根据 系统 需求 ， 创 建 名 称 为 school 的 数据 库 ， 创 建 10 张 数据 表 ， 如 下 所 示 。 

(1) 系统 模块 (菜单 ) 表 sys_ module， 用 于 记录 系统 功能 信息 。 

(2) 区 域 / 院 校 表 sys_area， 用 于 记录 区 域 或 院 校 信息 。 

(3) 用 户 信息 表 sys_user， 用 于 记录 用 户 信息 。 

(4) 参数 信息 表 pro_paraminfo， 用 于 记录 参数 信息 。 

(5) 角色 表 sys_role， 用 于 记录 角色 信息 。 

(6) 角色 模块 表 sys_role module， 用 于 记录 角色 对 应 的 模块 。 

(7) 用 户 角 色 表 sys_user_role， 用 于 记录 用 户 对 应 的 角色 。 

(8) 单位 信息 表 pro_unitinfo， 用 于 记录 学 校 的 单位 信息 ， 包 括 学 生 、 教 师 、 宿 舍 楼 、 
院 系 、 后 勤 部 门 等 某 一 个 体 或 群体 。 

(9) 通知 信息 表 notice， 用 于 记录 通知 信息 。 

(10) 通知 /投票 回复 表 answer， 用 于 记录 消息 接收 状态 或 投票 计数 信息 。 

其 中 ， 客 户 信息 表 user_info 的 字段 说 明 如 表 20-1 所 示 。 


表 20-1 系统 模块 (菜单 ) 表 sys_module 


字段 名 | 类 型 | 二 外 键 | 说 明 


moduleCode | ashaG9 | Pk | 模 肉 编号， 主键 


moduleName | varchar(s0) | | 栋 名 称 


modulePath 模块 访问 路 径 


isLeaf 


sortNumber [nay | | 
区 域 / 院 校 表 sys_area 的 字段 说 明 如 表 20-2 所 示 。 
表 20-2 区域 / 院 校 表 sys_area 


字段 名 类 型 说 明 
areaNumber varchar(50, 区 域 / 院 校 编号 ， 主 键 
name varchar(50) 区 域 / 院 校 名 称 
type int(11) 地 域 类 型 (1: 省 ;2: 市 ，3: 院 校 ) 
parentId varchar(36 父 结 点 编号 
isLeaf int(11) 是 否 子 结 点 (0: 否 ; 1: 是 ) 
sortNum int(11) 排序 号 
delState int(11 删除 状态 (1: 未 删除 ，2: 删除) 


用 户 信息 表 sys_user 的 字段 说 明 如 表 20-3 所 示 。 


[54 对 < 和 
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表 20-3 用 户 信息 表 sys_user 


字段 名 说 明 


UserCode Varchar(36) 用 户 编号 ， 主 键 

name varchar(50) 用 户 名 

psw varchar(50) 密码 

operatorId varchar(36 操作 人 

operatorTime timestamp 操作 时 间 

delState int(11) 删除 状态 (1: 未 删除 ，2: 删除 ) 


UnitId Varchar(36) 绑 定 单位 主键 


用 户 类 型 (1: 院 校 人 员 ; 2: 学 校 单位 用 户 ; 3: 平台 管 


it un 理 人 员 ， 可 分 配 不 同 院 校 账号 ，4: 各 院 校 管理 员 ) 


areald varchar(36) 所 属地 域 ID 
参数 信息 表 pro_paraminfo 的 字段 说 明 如 表 20-4 所 示 。 


表 20-4 参数 信息 表 pro_paraminfo 


字段 名 类 型 主 外 键 说 明 
id varchar(36 参数 id， 主 键 
name varchar(50; | | 参数 名 称 
parent id varchar(36 | | 父 结 点 编号 
ype Varchar(10， [I- =| 参数 类 型 (01: 通知 类 型 ，02: 单位 类 型 ) 
onltside code Varchar(S0 | | 外 部 编码 
sortNum int(11 | | 排序 号 
delState int(11 | | 删除 状态 0， 未 删除 ，2， 删除) 
areald Varchar(36 | | 所 属 院 校 ID 


角色 表 sys_role 的 字段 说 明 如 表 20-5 所 示 。 
表 20-5 角色 表 sys_role 


字段 名 类 型 说 明 
roleCode varchar(36 角色 编号 ， 主 键 
roleName varchar(50) 角色 名 称 
areald varchar(36) 所 属地 域 ID 


角色 模块 表 sys_role_ module 的 字段 说 明 如 表 20-6 所 示 。 

表 20-6 角色 模块 表 sys_role_module 
说 明 
rmld varchar(36) 角色 模块 编号 ， 主 键 


roleCode varchar(36, 角色 编号 


3] 
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续 表 


字段 名 类 型 
moduleCode | varchar(50) 
areald 


varchar(36) 


用 户 角 色 表 sys_user role 的 字段 说 明 如 表 20-7 所 示 。 
表 20-7 用 户 角色 表 sys_user_role 


说 明 


字段 名 类 型 
uld | varchar(36) 


用 户 角色 编号 ， 主 键 
userCode | varchar(36) 用 户 编号 
ToleCode Varchar(50) 角色 编号 


areald varchar(36 所 属地 域 ID 


单位 信息 表 pro_unitinfo 的 主要 字段 说 明 如 表 20-8 所 示 。 


表 20-8 单位 信息 表 pro_unitinfo 


字段 | 类 型 | 主 外 键 | 说 明 
id | varchar(36) | PK | 单位 编号 ， 主 键 
name | varchar(50) ”| | 单位 名 称 
unitTypeld | varchar36) | | 单位 类 型 编号 ， 与 表 pro_paraminfo 的 id 字段 关联 
unitGradeId | varchar36) | | 等 级 名 称 
outside code | varcharso) | | 外 部 编码 
delState | iD | | 删除 状态 1; 未 删除 ，2: 删除 ) 
areald | vachar36 | | 所 属地 域 ID 


通知 信息 表 notice 的 字段 说 明 如 表 20-9 所 示 。 


表 20-9 通知 信息 表 notice 


字段 名 类 型 
id | varchar(50) 
varchar(50) 


| 通知 编号 
| 用 户 编号 


UserId 


title 


content varchar(5000) 通知 内 容 
operatetime | varchar(50) | 通知 时 间 


通知 /投票 回复 表 answer 的 字段 说 明 如 表 20-10 所 示 。 


表 20-10 ”通知 /投票 回复 表 answer 
说 明 
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续 表 


字段 名 类 型 说 明 


uid | charso) 


用 户 对 应 的 单位 编号 
flag | intao) 接收 状态 (0: 未 接收 ;1: 已 接收 ) 
vote int(10) 投票 计数 


reason Varchar(500 理由 


20.3 ”环境 搭建 与 配置 文件 


可 以 参照 第 17 章 Spring 整合 MyBatis， 完 成 校园 通讯 管理 系统 的 框架 搭建 及 相关 配置 


文件 的 编号， 项目 最 终 的 目录 结构 如 图 20-2 所 示 。 


4 岂 cms 


4 外 sro/main/java 2 
出 comccms.config > webapp 
出 com.cems.controller 会 commons 
中 com.ccems.dao BB META-INF 
出 com.cems.dao.provider 4 BS views 
出 com.cems.DocUtil 会 area 
册 com.ccms.pojo BS menu 
页 comccmsservice SS notice 
出 com.cemsserviceimpl 会 param 
中 com.cemstools BS remind 
4 图 src/maimresources SS role 
及 applicationContextxml S tcbdoud 
dbconfig.properties SS templet 
@ src/testjava BS uprotocolinfo 
四 src/test/resources Sunit 
芭 Maven Dependencies SS user 
Bh JRE System Library Uava 国 index homePagejsp 
4 全 sc 目 indexjsp 
4 多 main 4 BE WEB-INF 
人 webapp EI 
BS test Wl dispatcherServlet-servletxml 
BS target 为 webxml 
国 pomxml 目 loginjsp 


20-2 ”系统 的 目录 结构 


com.cems.controller 包 用 于 存放 控制 器 类 ，com.cems.service 包 用 于 存放 业务 逻辑 层 接 
口 ，com.ccms.service.impl 包 用 于 存放 业务 逻辑 层 接口 的 实现 类 ，com.cems.dao 包 用 于 存放 
数据 访问 层 接 口 ，com.ccms.dao.provider 包 用 于 存放 DynaSqlProvider 类 ，com.ccms.pojo 包 
用 于 存放 实体 类 ，com-.ccms.tools 包 用 于 存放 工具 类 ，com.ccms.config 包 用 于 存放 包含 SQL 
语句 字符 串 的 类 。dbconfigproperties 为 存储 数据 库 连 接 信 息 的 属性 文件 ， 
applicationContext.xml 为 Spring 框架 的 配置 文件 ,dispatcherServlet-servletxml 为 Spring MVC 
框架 的 配置 文件 。 

在 src/main/webapp 目录 下 , commons 子 目录 中 存放 与 基于 Bootstrap 的 H+ 框架 、jQuery 
树 插件 ztree、 百 度 图 表 插 件 echarts、HTML 可 视 化 编辑 器 kindeditor、jQuery 弹出 层 插件 layer 
等 相关 的 CSS 和 js 文件 ，views 子 目 录 及 其 包含 的 子 目 录 中 存放 页 面 文件 。 
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20.4 创建 实体 类 


在 系统 开发 中 ， 实 体 类 常用 于 封装 数据 。 在 com.ccms.pojo 包 中 ， 依 次 创建 实体 类 
Answer、 Notice、 ProParamInfo、 ProUnitinfo、 SysArea、 SysModule、 SysRole、 SysRoleModule 
和 SysUser。 

实体 类 Answer 用 于 封装 通知 /投票 回复 表 answer 的 数据 ， 代 码 如 下 : 


Package com.ccms .pojo7 


Public class Answer { 

Private String id; 

private String nid; 

Private String uid; 

private String flag; 

Private String reason; 

// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 Notice 用 于 封装 通知 信息 表 notice 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 
public class Notice { 
private String id; 
private String userId; 
Private String content; 
private String title; 
private String operatetime; 
private int type; 
private String typeName; 
private String noticebelong; 
private String flag; 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 ProParamInfo 用 于 封装 参数 信息 表 pro_paraminfo 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 

public class ProParamInfo { 
private String id; 
Private String name; 
private String parent id; 
private String type; 
private String outside code; 
private int sortNum; 
private String parent name; 
private String areaId7 


// 省 略 上 述 属 性 的 getter 和 setter 方法 


< EE PO ORO I SS ee 
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实体 类 ProUnitinfo 用 于 封装 单位 信息 表 pro_unitinfo 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 

public class ProUnitinfo { 
private String id; 
private String name; 
private String unitTypeId7 
Private String unitGradeld; 
Private String outside code 
Private String delState7 
private String areald; 
private String unitType; 
private String unitGrade; 
// 省 略 上 述 属性 的 getter 和 setter 方法 

} 


实体 类 SysArea 用 于 封装 区 域 / 院 校 表 sys_area 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 

public class SysArea { 
private String areaNumber; 
private String name; 
private String type; 
private String parentId; 
private String isLeaf; 
Private String sortNum; 
private String delstate; 
private String parentName; 

// 省 略 上 述 属性 的 getter 和 setter 方法 

} 


实体 类 SysModule 用 于 封装 系统 模块 (菜单 ) 表 sys_module 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 
import java.util.ArrayList; 
import java.util.List; 
public class SysModule { 
/** 模 板 编 码 */ 
private String moduleCode; 
/** 模 板 名 称 */ 
private String moduleName; 
/** 模 板 路 径 */ 
private String modulePath; 
/** 父 级 模板 编号 */ 
private String parentCode; 
/** 是 否 为 叶子 结 点 */ 
private int isLeaf; 
/** 同 级 排序 编号 */ 
private int sortNumber; 
private List<SysModule> children = new ArrayList<sSysModule>(); 
/** 父 结 点 name*/ 


private String parentModuleName; 


<… 
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// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 SysRole 用 于 封装 角色 表 sys_role 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 
public class SysRole{ 
/** 角 色 编号 */ 
private String roleCode; 
/** 角 色 名 称 */ 
private String roleName; 
/** 区 域 id*/ 
Private String areaID7 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 SysRoleModule 用 于 封装 角色 模块 表 sys_role module 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 
public class SysRoleModule { 
private String rmid; 
/** 角 色 编 号 */ 
private String roleCode; 
/** 模 板 编号 */ 
private String moduleCode; 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 SysUser 用 于 封装 用 户 信息 表 sys_user 的 数据 ， 代 码 如 下 : 


Package com.ccms.pojo; 

public class SysUsert{ 
private String userCode; 
private String name; 
Private String psw; 
private String operatorId; 
private String operatorTime; 
private int delstate; 
private String unitId; 
private String userType; 
private String unitName; 
Private String operator; 
private String roleCodes; 
private String areaId7 
private String areaType; 
Private String areaName; 
private String roleNames; 
Private String province; 
private String city; 


private String county; 


// 省 略 上 述 属性 的 getter 和 sette 方法 
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此 外 ， 还 创建 了 分 页 类 Pager， 用 于 封装 分 页 信息 ， 代 码 如 下 : 


Package com.ccms.pojo; 
public class Pager { 
private int curPage;// 待 显示 页 
private int perPageRows;// 每 页 显示 的 记录 数 
private int rowCount; // 记录 总 数 
Private int pageCount; // 总 页 数 
// 根据 rowcount 和 perPageRows 计算 总 页 数 
public int getPageCount() { 
return (rowCount + perPageRows - 1) / perPageRows; 


} 
// 分 页 显示 时 ， 获 取 当 前 页 的 第 一 条 记录 的 索引 
public int getFirstLimitParam() { 
return (this.curPage - 1) * this.perPageRows; 


} 
// 省 略 其 他 属性 的 getter 和 setter 方法 
} 


图 表 图 列 类 Echarts， 用 于 封装 图 表 中 的 图 列 信息 ， 代 码 如 下 : 


Package com.ccms.pojo; 
public class Echarts { 


// 图 列 名 称 
private String name ; 
// 图 列 值 


private int value ; 


// 省 略 上 述 属性 的 getter 和 setter 方法 


20.5 后 台 登 录 


系统 后 台 登 录 页 为 loginjsp， 页 面 效 果 如 图 20-3 所 示 。 


四 ET 二 
C © localhosts08 
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在 loginjsp 页 面 中 ， 使 用 了 基于 Bootstrap 的 H+ 框 架 进 行 布 局 ， 为 了 使 用 Bootstrap 的 
H+ 框架 , 在 页 面 的 <head></head> 标 签 中 , 需要 引入 相关 的 css 和 js 文件 。 在 id 为 loginForm 
的 <form> 标 签 中 ， 定 义 了 用 户 名 、 密 码 文本 域 和 一 个 登录 按钮 ， 登 录 表 单 代码 如 下 : 


<form id="'loginForm' method="post" action="/ccms/user/login"> 


<p class="m-t-md" id="title" style="position: absolute; width: 237px; 
height: 26px; z-index: 1; top: 8%; left: 13%;"> 登 录 到 后 台 </p> 
<div style="position: absolute; width: 237px; height: 26px; z-index: 17 
top: 28%; left: 13%;"> 
<input type= 


"text" class="form-control uname" placeholder=" 用 户 名 
" name="name" id="userName" style="color:#030303;"/> 
</div> 
<div style="position: absolute; width: 237px; height: 26px; z-index: 2; 
top: 49%; left: 13%;"> 
<input type="password" class="form-control pword m-b" placeholder=" 
密码 " name="psw" id="pwd" style="color:#030303;"/> 
</div> 
<div style="position: absolute; width: 185px; height: 26px; z-index: 2; 
top: 65%? lefts:s 13%?"> 
<b><DIV id="div msg" style="color: #FF9C00;"></DIV></b> 
</div> 
<div style="position: absolute; width:237px; height: 40px; z-index: 37 
ED 省 和 生生 丰 在 全 十 本 风 这 
<button type="submit" class="btn btn-primary btn-block"> 登 录 
</button> 
</div> 
</form> 


在 登录 表单 中 ,填写 用 户 名 和 密码 , 单 击 “ 登 录 ” 按 钮 ,将 请 求 提交 到 /ccms/user/login。 
这 个 url 请 求 被 映射 到 控制 器 类 UserController 中 的 login 方法 。 
UserController 类 位 于 com.cems.controller 包 中 ，login 方法 的 代码 如 下 : 


package com.ccms.controller; 


@Controller 
@RequestMapping ("/user") 
public class UserController { 
@Autowired 
UserService userService; 
JsonUtil<SysUser> json = new JsonUtil<SysUser>(); 
Jsonobject jobject = null; 
// 登录 
@RequestMapping ("/login") 
public String login(@RequestParam("name") String name, 
HttpServletRequest req, HttpServletResponse res, 
@RequestParam("psw") String psw, HttpSession session, 
ModelAndView mv) throws IOException { 
SysUser user = userService.login (name, MDS5Util .MDS5 (psw)); 


if (user != null && user.getName() != null) { 


< a 
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redqd-getSession() .setAttribute (CommonValue .USERID, 
user.getUserCode () ) 7 

session.setAttribute (CommonValue .USERNAME, user.getName()); 

session.setAttribute (CommonValue .UNITNAME, 
user.getUnitName () ) 7 

session.setAttribute (CommonValue .USERTYPE, 
user.getUserType ()); 

session.setAttribute (CommonValue .UNITINFOID, 
user.getUnitId()); 

session.setAttribute (CommonValue .AREANUMBER, 
user.getAreaIld()); 

session.setAttribute (CommonValue .AERATYPE, 
user.getAreaType ()); 

session.setAttribute (CommonValue .AERANAME, 
user.getAreaName ()); 

res.sendRedirect (req.getContextPath() + "/views/index.jsp"); 

} else { 

session.setAttribute (CommonValue .USERID, null); 

session.setAttribute (CommonValue .UNITINFOID, null); 

session.setAttribute (CommonValue .USERNAME, null); 

session.setAttribute (CommonValue .UNITNAME, null); 

session.setAttribute (CommonValue .USERTYPE, null); 

session.setAttribute (CommonValue .AREANUMBER, null); 

session.setAttribute (CommonValue .AERATYPE, null); 

session.setAttribute (CommonValue .AERANAME, null); 

res.sendRedirect (req.getContextPath() + 
"/login.jsp?rtnCode=500"); 

} 


return null; 


} 

在 login 方法 中 ， 调 用 业务 接口 UserService 中 的 login 方法 ， 根 据 用 户 名 和 密码 进行 登 
录 验 证 。 验 证 通过 后 ， 将 登录 用 户 的 相关 信息 存 入 HttpSession 对 象 ， 再 重 定向 到 系统 首页 
面 index.jsp。 如 果 登 录 失 败 ， 则 重 定向 到 登录 页 。CommonValue 类 中 定义 了 一 些 公共 变量 ， 
该 类 位 于 com.ccms.tools 包 中 。 

UserService 接口 位 于 com.cems.service 包 中 ，login 方法 的 声明 如 下 : 


package com.ccms.service; 
import java.util.List; 


public interface UserService { 
// 登录 


public SysUser login(String name, String psw); 
} 


在 com.ccms.service.impl 包 中 ， 创 建 UserService 接口 的 实现 类 UserServiceImpl， 实 
login 方法 ， 如 下 所 示 : 


Package com.ccms.service.impl; 


import java.util.ArrayList; 
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QService ("userService") 
QTransactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
Public class UserServiceImpl implements UserService { 
@Autowired 
UserDao userDao; 
@Autowired 
ModuleDao moduleDao; 
QOoverride 
public SysUser login (String name, String psw) { 
Map<String, Object> params = new HashMap<Sstring, Object>(); 
params.put ("name", name); 
params.put ("psw", psw); 
return UserDao.selectByNameAndPwd (params); 


} 


在 UserServiceImpl 类 的 login 方法 中 ， 将 传 入 的 用 户 名 和 密码 封装 到 Map<String, 
Object> 类 型 的 params 对 象 中 ， 再 调用 数据 访问 层 接口 UserDao 中 的 selectByNameAndPwd 
方法 。 

接口 UserDao 位 于 com.ccms.dao 包 中 ，selectByNameAndPwd 方法 的 代码 如 下 : 


Package com.ccms.dao; 


import com.ccms.dao.provider.UserDynaSqlProvider; 

import com.ccms.pojo.SysUser; 

public interface UserDao { 
// 根据 登录 名 和 密码 查询 合法 用 户 
QSelectProvider (type = UserDynaSsqlProvider.class, method = "login") 
public SysUser selectByNameAndPwd (Map<String, Object> params); 

} 


selectByNameAndPwd 方法 标注 了 @SelectProvider 注解 ， 指 定 由 UserDynaSqlProvider 
类 中 定义 的 login 方法 提供 需要 执行 的 SELECT 语句 。UserDynaSqlProvider 类 位 于 
com.ccms.dao.provider 包 中 ，login 方法 的 代码 如 下 : 


Package com.ccms.dao.provider; 
import java.util.Map; 
import com.ccms.config.SysUserConfig; 
import com.ccms.pojo.SysUser; 
import com.ccms.tools.CommonValue; 
public class UserDynaSsqlProvider { 
// 登录 
public String login (Map<String，Object> params) { 
String name = (String) params.get ("name"); 
String psw = (String) params.get ("psw"); 
String sql = "select " +" su.*," + " (case when su.userType=1 then 
' 院 系 账号 '" + " when su.userType=3 then ' 平 台 管理 员 '" + " when su.userType=4 
then ' 院 校 管理 员 '" +" elsepui.name end) as unitName,"+" sa weiLeaf.type 


@<«… 
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as areaType," + " (case "+ " when sa weiLeaf.type=3 then 
CONCAT (sa province.name,'.',sa city.name,'.',sa weiLeaf.name)" 
+ " when sa weiLeaf.type=2 then 
CONCAT (sa city.name,'.',sa weiLeaf.name)" 
+" when sa weiLeaf.type=1 then CONCAT (sa weiLeaf.name)"+ 
" else ' 未 知 ' end" + " ) as areaName" 
+" fromsys useras su"+" left join pro unitinfo as pui" 
+ " on su.unitId=pui.id™ 
+ " left join sys area as sa weiLeaf" + " on 
su.areald=sa weiLeaf.areaNumber" 
+ " left join sys area as sa city" + " on 
sa weiLeaf.parentId=sa city.areaNumber" 
+ " left join sys area as sa province" + " on 
sa city.parentId=sa province.areaNumber" 
+ " Where 1=1 "; 
sql += " and su.delState=1"7 
sql += " and su.name='" + name + "' and su.psw='" + psw + "'"; 


return sql; 


} 

在 这 个 login 方法 中 ， 通 过 数据 表 sys_user 对 用 户 名 和 密码 进行 验证 ， 同 时 还 关联 了 数 
据 表 pro_unitinfo 和 sys_area， 以 获取 该 用 户 关 联 的 其 他 数据 。 

在 登录 页 login.jsp 中 ， 如 果 填 写 用户 名 sysadmin、 密 码 123456， 单 击 登 录 按钮 ， 则 以 
平台 管理 员 的 身份 进入 系统 首页 面 ndexjsp， 如 图 20-4 所 示 。 

如 果 填 写 用 户 名 yzd、 密 码 123456， 单 击 “ 登 录 ” 按 钮 ， 则 以 院 校 管理 员 的 身份 进入 
系统 首页 面 index.jsp， 如 图 20-5 所 示 。 

如 果 填 写 用 户 名 1404_yx001、 密 码 123456， 单 击 “ 登 录 ” 按 钮 ， 则 以 单位 用 户 的 身份 
进入 系统 首页 面 index.jsp， 如 图 20-6 所 示 。 


€ 3 © [© locahost8080/cems/Vviews/indexsp# 
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图 20-6 单位 用 户 界面 


平台 管理 员 界 面 、 院 校 管理 员 界 面 和 单位 用 户 界 面 的 主要 区 别 在 于 左 侧 导航 菜单 不 同 ， 
在 系统 首页 面 index.jsp 中 ， 导 航 布局 代码 如 下 
<!-- 左 侧 导航 开始 --> 


<nav class=" 


avbar-default navbar-static-side" role="navigation"> 


<div class="nav-close"> 
<i class="fa fa-times-circle"></i> 
</div> 


<div class="sidebar-collapse"> 


<ul class="nav" i side-menu"> 
<li class="nav-header" style="height: 158px;"> 
<div class="dropdown profile-element"> 
<span><img alt="image™" 
src="/ccms/commons/images/head-index.jpg" 
class="img-circle" height="40%"width="40%" /> </span> 
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<a data-toggle="dropdown" class="dropdown-toggle™" 
"> <span class="clear"> <span class="block m-t-xs"><strong 
class="font-bold"> <c:choose> 
<c:when 
test="${sessionscope.USERTYPE!="'3'}"> 院 校 : ${sessionSscope .AERANAME} 
</c:when> 


<c:otherwise> 
</c:otherwise> 
</c:choose> <br /></strong> </span> <span 
class="text-muted text-xs 
block">${sessionScope.UNITNAME}:${sessionScope.USERNAME}<b 
class="caret"></b> </span> </span> </a> 
<ul class="dropdown-menu animated fadeInRight m-t-xs"> 
<1i> 
<a data-toggle="modal" data-keyboard="true" 
data-backdrop="true" id="btn ResetPsw"> 
<b> 修 改 密码 </b></a> 
/li> 
< 
<a href="/ccms/user/1oginout"><b> 安 全 退出 </b> 
</a> 
</1i> 
</ul> 
</div> 
<br/><br/> 
<div class="logo-element"> 
</div> 
</1i> 
<c:if test="${sessionScope.USERTYPE=: 


13'}"> 


J_menuItem" 


area/areaAdminManager.jsp"><i 
class="fa fa-check"></i> <span class="nav-label"> 院 校 管理 员 


管理 </span> 
</a> 
</Ii> 
<1i> 
<a clas J_menuItem" 
href="menu/menuManager.jsp"><i 
class="fa fa-check"></i> <span class="nav-label"> 
系统 功能 模块 管理 </span> 
</a> 
</1i> 
<1i> 
<a class="J menuItem" 
href="area/schoolManager.jsp"><i 
class="fa fa-check"></i> <span class="nav-label"> 
院 校 管理 </ span> 
</a> 
</1i> 
</c:if> 
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<c:if test="${sessionScope.USERTYPE=="'4'}"> 
<1i> 
<a href="#"> <i class="fa fa-check"></i> <span 
class="nav-label"> 单 位 管理 </span> 
<span class="fa arrow"></span> 
</a> 


<ul class="nav nav-second-level"> 
<1i> 
<a class="J menuItem" 
href="unit/unitInfo.jsp"> 单 位 设置 </a> 


/LS 
<1i> 
<a clas _menuItem" 
href="param/orgTypeParam.jsp"> 单 位 类 别 </a> 
</1i> 
</ul> 
</1i> 
<1i> 
<a href="#"> <i class="fa fa-check"></i> <span 


nav-label"> 用 户 权 限 管理 </span> 


<span class="fa arrow"></span> 


</a> 
<ul class="nav nav-second-level"> 
<1i> 
<a class="J menuItem" 
href="user/userManager.j sp"> 用 户 管理 </a> 
</1i> 
<1i> 
<a class="J menuItem" 
href="role/roleManager.j sp"> 角 色 管 理 </a> 
</1i> 
</ul> 
</1i> 
/erif> 
</ul> 
</div> 
</nav> 


<!-- 左 侧 导航 结束 --> 


当 USERTYPE=3 时 ， 显 示 平 台 管理 员 菜 单 ， 当 USERTYPE=4 时 ， 显 示 各 院 校 管理 员 
菜单 ， 当 USERTYPE=1 或 2 时， 显示 的 菜单 是 在 自 执行 函数 $(functionO 人 {中 指定 的 ， 相 关 
代码 如 下 : 


var userType="<%=session.getAttribute ("USERTYPE") %>"; 
var userId="<%=session.getAttribute ("USERID") $>"; 
if(userType: 
$.ajax({ 
url:'/ccms/user/loadpermissions', 


type: 'post', 
async: false, 


cache:false, 
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data: {userId:userId}, 
dataType:'json', 
success: function(data){ 
for (var i=0,1len=data.length;i<len;i++){ 
var ps = datal[lil]; 
if (ps.children.length>0){ 
Var result = RecMenu (ps); 
$('#side-menu') .append (result); 


} 
} 
error: function (aa, ee, rr) { 
} 
1D); 


在 页 面 index.jsp 加 载 时 ， 如 果 用 户 类 型 USERTYPE=1 或 2， 则 通过 jQuery AJAX 方式 
向 后 台 服 务 器 发 送 请 求 , url 参数 用 于 指定 发 送 请 求 的 地 址 , 这 里 为 /ccms/userloadpermissions， 
这 个 请 求 将 映射 到 控制 器 类 UserController 中 的 loadPermiss 方法 ; dataType 参数 用 于 指定 预 
期 服务 器 返回 的 数据 类 型 ， 这 里 指定 返回 JSON 数据 ; type 参数 用 于 指定 请 求 方式 ， 这 里 为 
post 方式 ，async 参数 用 于 指定 是 否 发 送 异 步 请 求 ， 这 里 为 false， 表 示 同 步 请 求 ， 此 时 将 锁 
住 浏览 器 ， 用 户 的 其 他 操作 必须 等 待 请 求 完 成 才 可 以 执行 ，cache 属性 用 于 设置 是 否 启用 
AJAX 数据 缓存 ， 这 里 为 false， 表 示 禁 用 ; data 参数 用 于 指定 发 送 到 服务 器 的 数据 ， 这 里 
传递 的 参数 为 用 户 编号 userId; success 参数 的 类 型 为 Function, 表示 请 求 成 功 后 的 回调 函数 ， 
服务 器 返回 的 数据 将 传 给 该 函数 的 data 参数 ， 前 端 页 面 index.jsp 使 用 data 中 的 数据 生成 单 
位 用 户 的 功能 菜单 。 

在 控制 器 类 UserController 中 ，loadPermiss 方法 的 代码 如 下 : 

// 根据 用 户 id 获取 module 列表 


@RequestMapping (value = "/loadpermissions", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public List<SysModule> loadPermiss (String userId, HttpServletRequest req, 
HttpServletResponse res) 
throws Exception { 
List<SysModule> modules = userService.selectModuleByUserId (userId); 
if (modules == null) { 
modules = new ArrayList<SysModule>(); 
String json = new JsonUtil<SysModule>() .objectsToJSON (modules); 
res.resetBuffer(); 
res.setContentType ("text/html;charset=utf-8"); 
res.getOutputstream() .write(json.getBytes ("utf-8")); 
res.getOutputstream() .flush(); 
return null; 


} 


loadPermiss 方法 有 3 个 参数 ,第 一 个 是 String 类 型 的 参数 userId, 用 于 封装 前 端 页 面 传 
递 来 的 用 户 编号 ; 第 二 个 是 HttpServletRequest 类 型 的 参数 req,， 代 表 客 户 端的 请 求 ; 第 三 个 
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是 HttpServletResponse 类 型 的 参数 res， 代 表 服 务 器 的 响应 。 

在 loadPermiss 方法 中 ， 首 先 调用 业务 接口 UserService 的 selectModuleByUserId 方法 ， 
根据 用 户 id 获取 系统 模块 列表 ; 然后 通过 JSON 转换 工具 类 JsonUtil 的 objectsToJSON 方法 
将 系统 模块 列表 转换 成 JSON 格式 的 字符 串 ， 并 将 其 发 送 到 前 端 页 面 。 

在 业务 接口 UserService 中 ， 声 明 selectModuleByUserId 方法 ， 如 下 所 示 : 


// 根据 用 户 id 获取 module 列表 
public List<SysModule> selectModuleByUserId (String UserId) 


在 接口 UserService 的 实现 类 UserServiceImpl 中 ， 实 现 这 个 方法 ， 如 下 所 示 : 


QOverride 
Public List<SysModule> selectModuleByUserId (String userId) { 
List<SysModule> result = new ArrayList<SysModule>(); 
// 查询 所 有 的 模块 
List<SysModule> modules = moduleDao.getAllModule (); 
if (modules == null) { 
modules = new ArrayList<SysModule>(); 


} 
// 查询 用 户 可 以 操作 的 模块 编号 集合 
List<String> mids = moduleDao.getmoduleCodes (userId); 
if (mids == null) { 
mids = new ArrayList<string>(); 


3 
// 去 除 没有 权限 的 叶子 结 点 
clear (modules, mids); 


// 建立 模块 层次 结构 


for (int i = 0; i < modules.size(); i++) { 
SysModule m = modules.get (i); 
if (m.getParentCode() != null && m.getParentCode() .equals("0")) { 


resetModules2(m, modules); 
result.add (m); 
} 
} 


return result; 


} 


在 实现 类 UserServiceImpl 的 selectModuleByUserId 方法 中 ， 首 先 调用 ModuleDao 接口 
的 getAlIModule 方法 查询 所 有 的 模块 ; 然后 调用 ModuleDao 接口 的 getmoduleCodes 方法 查 
询 该 用 户 可 以 操作 的 模块 编号 集合 ; 接着 调用 自 定义 方法 clear 根据 mids 去 除 没有 权限 的 叶 
子 结 点 ;最 后 建立 模块 层次 结构 。 

在 ModuleDao 接口 中 ，getAlIModule 和 getmoduleCodes 方法 的 代码 如 下 : 


Package com.ccms.dao; 

import java.util.List; 

import org.apache.ibatis.annotations.Param; 
import org.apache.ibatis.annotations.Select; 
import com.ccms.pojo.SysModule; 

Public interface ModuleDao { 


// 查询 所 有 模块 


< Sa a a a a 
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select ("select * from sys module order by sortNumber asc") 

public List<SysModule> getAllModule(); 

// 查询 用 户 可 以 操作 的 模块 编号 集合 

@Sselect ("select distinct moduleCode from sys_role module where roleCode 
+ "in (select roleCode from sys user role where userCode=#{userCode})") 
List<String> getmoduleCodes (@Param("userCode") String userCode); 


20.6 平台 管理 员 功 能 


平台 管理 员 功 能 包括 院 校 管理 员 管理 、 院 校 管 理 和 系统 功能 模块 管理 ， 这 里 主要 讲解 
院 校 管理 员 管 理 、 院 校 管 理 的 实现 过 程 。 


20.6.1 ” 院 校 管理 员 管 理 


在 图 20-4 所 示 的 平台 管理 员 界 面 中 ， 单 击 院 校 管 理 员 管 理 菜单 ， 打 开 院 校 管理 员 管理 
页 面 areaAdminManagerjsp， 如 图 20-7 所 示 。 


EE = . oo-°omn 
区 一 下 
se | ma ， : 四 
于 二 


图 20-7 ” 院 校 管理 员 管 理 页 面 


在 areaAdminManager.jsp 页 面 中 ， 需 要 实现 院 校 管理 员 列 表 的 显示 、 编 辑 、 重 置 密 码 、 
新 增 、 删 除 ， 以 及 根据 省 、 市 、 院 校 和 用 户 名 搜索 等 功能 。 


1. 显示 院 校 管理 员 列 表 


为 了 显示 院 校 管理 员 列 表 ， 在 页 面 中 定义 了 一 个 id 为 table 的 <table> 标 签 ， 如 下 所 示 : 
<!-- 院 校 管理 员 列 表 显 示 --> 


<div class="ibox-content"> 
<table id="table"> 
</table> 

</div> 
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然后 在 $(function0 { 3 代码 段 中 ， 通 过 JavaScript 初始 化 这 个 <table> 标 签 ， 如 下 所 示 : 


$(function() { 
loadCcity("/ccms/area/getshengAreaList", 
loadCity("/ccms/area/getshengAreaList", 
loadCcity("/ccms/area/getshengAreaList", 
$("#username add") .val(''); 
$("#userpsw add") .val (''); 
$("#unitId") .val (''); 
$("#userType") .val (''); 
vform('upform', upUser); 
vform('addform', addUser); 
vform('resetform', resetPsw); 
var S$table = $('#table'); 
// 初始 化 table 
S$table.bootstrapTable({ 

"/ccms/user/getAreaUser", 

"Post'v 


url 
method 


"sheng search", null); 
"sheng add", null); 
"sheng up", null); 


contentType : "application/x-www-form-urlencoded", 


dataType 
pagination true，// 分 页 
PageSize 10, 
pageNumber : 1, 
singleSelect : false, 
queryParamsType : 
queryParams : 
var param = { 
page : 
rows : 


"json", 


"undefined", 


params .pageSize, 
userType : 4 
}; 
return param; 
}, 


function queryParams (params) 


{ // 设 置 查 询 参数 


params .pageNumber, 


cache false, 
sidePagination : "server"，// 服 务 端 处 理 分 页 
columns : [ 
checkbox true 
}, 
title : ' 用 户 名 '， 
field : 'name', 
valign : 'middle' 
bs 
title : “所 属 区 域 '， 
field : 'areaName', 
valign : 'middle'" 
jy 
title : ' 用 户 类 型 '， 
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field : "userType', 


valign : "middle'yv 
formatter : function(value, row, index) { 
if (value == "1') { 
return ' 院 方 ' 
} else if (value == '2') { 
return ' 部 门 '; 
} else if (value == '3') { 
return ' 平 台 管 理 员 '; 
} else if (value == "4') { 


return ' 院 校 管理 员 '; 


title : ' 操 作 人 '， 
field : "operator'yv 
valign : "middle' 


title : "操作 时 间 '， 
field : 'operatorTime'y 
valign : 'middle', 
formatter : function(value, row, index) { 
return value.substring(0, 
value.length - 2); 


title : "操作 
ficld s ”dy 
formatter : function(value, row, index) { 
var e = '<a href="#" class="btn btn-gmtx-definel" 
onclick="edit (\'' + row.userCode 
二 
row.delstate 
下 \ 下 和 N Wn 
row.name 
I 
row.areaName 
NN 
row.province 
NA 
row.city 
NN 
row.county + "'\') "> 编辑 </a> '; 
var d = '<a href="#" class="btn btn-gmtx-definel" 


+ 


onclick="resetPsw(\'' + row.userCode 
+ "\') "> 重 置 密码 </a> '; 


return e+d; 
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} ] 


]) 7 

Ds 

通过 调用 bootstrapTable 方法 ， 将 <table> 标 签 创 建 为 Bootstrap 的 table 控件 ， 并 通过 设 
置 一 系列 属性 来 初始 化 这 个 table 控件 。url 属性 用 于 设置 table 控件 的 数据 源 ， 这 里 为 
/ccms/user/getAreaUser, 这 个 url 请 求 将 映射 到 后 台 控制 器 类 UserController 中 的 getAreaUser 
方法 ; method 属性 用 于 设置 请 求 方式 ， 这 里 为 post 方式 ; contentType 属性 用 于 设置 发 送 到 
服务 器 的 数据 编码 类 型 ， 这 里 为 application/x-www-form-urlencoded; dataType 属性 用 于 设 
置 服务 器 返回 的 数据 类 型 , 这 里 为 json; pagination 属性 用 于 设置 是 否 显示 分 页 , 这 里 为 tue， 
表示 允许 分 页 ， pageSize 属性 用 于 设置 每 页 的 记录 行 数 ， 这 里 为 10; pageNumber 属性 用 于 
设置 首页 页 码 ， 这 里 为 1; singleSelect 属性 用 于 设置 是 否 单 选 ， 这 里 为 false， 表 示 可 以 多 
选 ，queryParamsType 属性 用 于 设置 参数 格式 ， 这 里 为 undefined; queryParams 属性 用 于 设 
置 查询 参数 ，Bootstrap 的 table 控件 会 将 page、rows 和 userType 三 个 参数 传递 到 控制 器 类 
UserController 中 的 getAreaUser 方法 ; cache 属性 用 于 设置 是 否 启 用 AJAX 数据 缓存 ， 这 里 
为 false, 表示 禁用 ; sidePagination 属性 用 于 设置 在 哪里 进行 分 页 ,可 选 值 为 client 或 者 server， 
这 里 为 server， 表 示 由 服务 端 处 理 分 页 ，columns 用 于 设置 列 。 

Bootstrap 的 table 控件 的 数据 源 来 自控 制 器 类 UserController 中 的 getAreaUser 方法 的 返 
回 结果 ， 代 码 如 下 : 


Package com.ccms.controller; 


import com.google.gson.JsonObject; 
@Controller 
@RequestMapping ("/user") 
public class UserController { 

@Autowired 

UserService userService; 

JsonUtil<SysUser> json = new JsonUtil<SysUser>(); 

Jsonobject jobject = null; 

// 获取 区 域 管理 员 

@RequestMapping ("/getAreaUser") 

@ResponseBody 

public Map<Sstring, Object> getAreaUser(Integer page, Integer rows, 
HttpServletRequest req, HttpServletResponse rep, @ModelAttribute SysUser 
user) { 

// 初始 化 分 页 类 对 象 


Pager pager = new Pager() 7 


pager.setCurPage (page); 

pager.setPerPageRows (rows); 

// 创建 对 象 params， 用 于 封装 查询 条 件 

Map<string, Object> params = new HashMap<string, Object>(); 
params.put ("user", user); 

// 获取 满足 条 件 的 区 域 管 理 员 总 数 

int totalCount = userService.count (params); 


// 根据 查询 条 件 获 取 当 前 页 的 区 域 管理 员 列 表 


@< dd a 
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List<SysUser> users = userService.findAreaUser (user, pager); 
// 创建 对 象 result， 用 于 保存 返回 结果 

Map<String, Object> result = new HashMap<string, Object>(2); 
result.put ("total", totalCount); 

result.put ("rows", users); 

return result; 


} 


通过 @RequestMapping 注解 ， 将 用 户 对 /ccms/user/getAreaUser 这 个 url 的 请 求 映射 到 
getAreaUser 方法 。getAreaUser 方法 有 5 个 参数 ， 一 个 是 SysUser 类 型 的 参数 user， 用 于 封 
装 表单 传递 来 的 查询 条 件 ; 有 两 个 Integer 类 型 的 参数 page 和 rows, 用 于 接收 从 前 端 Bootstrap 
的 table 控件 传递 来 的 页 码 和 每 页 显示 的 记录 数 ; 有 一 个 HttpServletRequest 类 型 的 参数 req， 
代表 客户 端的 请 求 ， 有 一 个 HttpServletResponse 类 型 的 参数 rep， 代 表 服 务 器 的 响应 。 

在 getAreaUser 方法 中 ， 首 先 初始 化 一 个 分 页 类 对 象 pager， 给 其 设置 curPage 和 
perPageRows 两 个 属性 值 ; 然后 创建 Map<String, Object> 类 型 的 对 象 params， 用 于 封装 查询 
条 件 ; 接着 依次 调用 业务 接口 UserService 的 count 方法 ， 获 取 满 足 条 件 的 区 域 管理 员 总 数 ， 
调用 findAreaUser 方法 ,获取 满足 条 件 的 区 域 管理 员 列 表 ; 再 创建 Map<String, Object> 类 型 
的 对 象 result， 保 存 查 询 结果 数据 ， 最 后 将 返回 结果 转 为 JSON 格式 ， 以 字符 串 的 形式 发 送 
到 前 端 页 面 areaAdminManager.jsp， 为 Bootstrap 的 table 控件 提供 数据 源 。 

在 业务 接口 UserService 中 ， 声 明 两 个 方法 ， 如 下 所 示 : 

// 获取 满足 条 件 的 区 域 管理 员 总 数 


Integer count (Map<String，Object> params) 7 
// 分 页 获取 区 域 管理 员 


List<SysUser> findRAreaUser(SYsUser user, Pager pager) 


在 接口 UserService 的 实现 类 UserServiceImpl 中 ， 实 现 这 两 个 方法 ， 如 下 所 示 : 


public Integer count (Map<String, Object> params) { 
return userDao.count (params); 
} 
public List<SysUser> findAreaUser (SysUser user, Pager pager) { 
// / 创建 对 象 params 
Map<Sstring, Object> params = new HashMap<string, Object>(); 
// 将 封装 有 查询 条 件 的 user 对 象 放 入 params 
params.put ("user", user); 
// 根据 条 件 计算 区 域 管理 员 总 数 
int recordCount = userDao.count (params); 
// 给 pager 对 象 设置 rowcount 属性 值 (记录 总 数 ) 
pager.setRowCount (recordCount); 
if (recordCount > 0) { 
// 将 page 对 象 放 入 params 


params.put ("pager", pager); 


, 
// 分 页 获取 区 域 管理 员 信 息 
return userDao.selectByPage (params); 


} 
在 实现 类 UserServiceImpl 的 count 方法 中 ， 直 接 调用 了 接口 UserDao 中 的 count 方法 。 
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在 UserDao 接口 中 ，count 方法 的 代码 如 下 : 
// 根据 条 件 查询 区 域 管理 员 总 数 


Q@SelectProvider (type = UserDynaSsqlProvider.class, method = "count") 


Integer count (Map<String Object> params); 


在 UserDao 接口 的 count 方法 上 , 通过 @SelectProvider 注解 指定 由 UserDynaSqlProvider 
类 中 定义 的 count 方法 提供 需要 执行 的 SELECT 语句 。 

在 UserDynaSqlProvider 类 中 ，count 方法 的 代码 如 下 : 

// 动态 查询 区 域 管理 员 总 记录 数 


Public String count (Map<String, Object> params) { 


String sql = "select count(*) from sys_ user as su where su.delState=1"; 
if (params.get ("user") != null) { 

SysUser user = (SysUser) params.get ("user"); 

if (user.getName() != null && !"".equals(user.getName())) { 


sql += " and su.name LIKE ' + user.getName() + "%' "; 
} 
if (user.getAreaIld() != null && !user.getRreaId() .isEmpty()) { 
sql += " and su.areald in (select areaNumber from sys area as sa 
where sa.areaNumber= '" + user.getAreaId() + "'"; 
sql += " union all select areaNumber from sys area as sa where 
sa.parentId='" + user.getAreaIld() + "'"; 
sql += " union all select areaNumber from sys_area as sa where 


sa.parentId in (select areaNumber from sys_ area as sa where sa.parentId="'" 
+ user.getAreaId() + "')" + ") ”7 
2 += " and su.userType=" + user.getUserType() + " "7 
sql += " order by operatorTime desc"; 
a sql; 
} 
实现 类 UserServiceImpl 的 findAreaUser 方法 有 两 个 参数 ， 一 个 是 SysUser 类 型 的 参数 
user， 用 于 封装 前 端 页 面 传递 来 的 查询 条 件 ， 另 一 个 是 Pager 类 型 的 参数 pager， 用 于 封装 
从 前 端 页 面 传递 来 的 页 码 和 每 页 记录 数 。 在 findAreaUser 方法 中 ， 创 建 了 一 个 Map<String, 
Object> 类 型 的 对 象 params， 用 来 存放 两 个 对 象 ， 一 个 是 user 对 象 ， 另 一 个 是 pager 对 象 。 
对 于 pager 对 象 来 说 ， 放 入 params 前 ， 还 需 设 置 pager 对 象 的 rowCount 属性 值 ， 这 个 值 是 
通过 调用 UserDao 接口 的 count 方法 获得 的 。 设 置 好 params 对 象 后 ， 再 调用 UserDao 接口 
的 selectByPage 方法 获得 当前 页 的 区 域 管理 员 列 表 。 
在 UserDao 接口 中 ，selectByPage 方法 的 代码 如 下 : 


// 根据 条 件 ， 分 页 动态 查询 区 域 管理 员 
@SsSelectProvider (type = UserDynaSqlProvider.class, method = 
"selectWithParam" ) 


List<SysUser> selectByPage (Map<String, Object> params); 

在 UserDao 接口 的 selectByPage 方法 上 ， 通 过 @SelectProvider 注解 指定 由 
UserDynaSqlProvider 类 中 定义 的 selectWithParam 方法 提供 需要 执行 的 SELECT 语句 。 

在 UserDynaSqlProvider 类 中 ，selectWithParam 方法 的 代码 如 下 : 

// 分 页 动态 查询 区 域 管理 员 


public String selectWithParam(Map<string, Object> params) { 


@< a ee ee i a 
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String sql = SysUserConfig.getAllAreaAdmin; 


if (params.get ("user") != null) { 
SysUser user = (SysUser) params.get ("user"); 
if (user.getName() != null && !"".equals(user.getName())) { 
sql += " and su.name LIKE '%" + user.getName() + "%' "7 
} 
if (user.getArealId() != null && !Iuser.getAreald() .isEmpty()) { 
sql += " and su.areald in (select areaNumber from sys area as sa 
where sa.areaNumber= '" + User-getRreaId () + "'"; 
sql += " union all select areaNumber from sys_area as sa where 
sa.parentId='" + user.getAreaIld() + "'"; 


sql += " union all select areaNumber from sys area as sa where 
sa.parentId in (select areaNumber from sys area as sa Where sa.parentId="'" 
+ user.getAreaId() + "')" + ") "; 


} 


sql += " and su.userType=" + user.getUserType() + ""; 
sql += " order by operatorTime desc"; 


了 
if (params.get ("pager") != null) { 
sql += " limit #{pager.firstLimitParam},#{pager.perPageRows}"; 


} 


return sql; 
} 
2. 编辑 院 校 管理 员 


在 院 校 管理 员 列 表 中 ， 每 个 记录 行 中 都 有 一 个 编辑 按钮 。 单 击 “ 编 辑 ” 按钮， 打开 “用 
户 修改 ”对 话 框 ， 如 图 20-8 所 示 。 


Wf 


Smaoyomg 


图 20-8 “用 户 修改 ”对 话 框 
用 户 修改 对 话 框 的 布局 如 下 : 


<div class="modal fade" id="upwin"> 
<div class="modal-dialog" style="width: 400px"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal™ 
aria-hidden="true">&times;</button> 
<h4 class="modal-title" id="upwinlable"> 用 户 修改 </h4> 
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</div> 
<div class="modal-body"> 


<div class="row"> 
<form method="post" class="form-horizontal"id="upform"> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 
用 户 名 : </label> 
<div class="col-sm-8 controls"> 
<input type="text" value="" 
class="form-control" name="name" id="username up" tabindex="0" /> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 
省 : </label> 
<div class="col-sm-8 controls"> 
<select data-placeholder=" 请 选择 所 属 省 " 
onchange="changeSheng('_up')" class="form-control" name="sheng up" id="sheng up" 
tabindex="3"> 
<option value=''> 请 选择 </option> 
</select> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 市 : 
</label> 
<div class="col-sm-8 controls"> 
<select data-placeholder=" 请 选择 所 属 市 " 
onchange="changeShi(' up')" class="form-control" name="shi up" id="shi up" 
tabindex="3"> 
<option value=''> 请 选择 </option> 
</select> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 院 校 : 
</label> 
<div class="col-sm-8 controls"> 
<select data-placeholder=" 请 选择 院 校 " 
class="form-control" name="xian up" id="xian up" tabindex="3"> 
<option value=''> 请 选择 </option> 
</select> 
</div> 
</div> 
<div class="form-group"> 
<div class="controls"> 
<button type="submit" class="btn 
btn-gmtx-definel center-block"> 
修改 </button> 
</div> 
</div> 


< Se ea dd a a a 
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</form> 
</div> 
</div> 
</div> 
</div> 
</div> 


单 击 “ 编 辑 ” 按 钮 ， 将 执行 JavaScript 函数 edit。 在 函数 edit 中 ， 首 先 显示 用 户 修改 对 
话 框 ， 然 后 将 选中 行 的 用 户 数据 绑 定 到 对 话 框 中 的 表单 元 素 上 ， 代 码 如 下 : 


Eunction edit (uCode, delState, uname, areaName, province, city, country) { 
clearWin(™" up"); 
ucode up = uCode; 
del State = delstate; 
$("#upwin") .modal ('show'); 
$("#username up") .val (uname); 
$("#showArea up") .val (areaName); 
$("#sheng up") .val (province); 
$("#sheng up") .trigger ("change"); 
$("#shi up") .val (city); 
$("#shi up") .trigger ("change"); 
$("#xian up") .val (country); 


} 

在 用 户 修改 对 话 框 中 ，“ 省 份 ” 下 拉 列 表 控 件 的 数据 源 是 在 $(functionO { 代码 块 中 定 
义 的 ， 如 下 所 示 : 

loadcity("/ccms/area/getShengRreaList"，"sheng_up"，mnul1) 7 


loadCity 函数 定义 在 CommonValuejs 文件 中 ,该 文件 位 于 src/main/webapp/commons/jslib 
目录 下 ，loadCity 函数 如 下 所 示 : 


// 省 市 院 校 下 拉 框 


function loadCity(url, idstr, pid) { 


$.ajax({ 
Url : rl 
dataType : 'json', 
async : false, 
data : { 


parentId : pid 
kx 


type : 'post', 
success : function(result) { 
var options = "<option value=''> 请 选择 </option>"; 


if (result.count > 0) { 
$.each (result.CityList, function(key, val) { 
options += '<option value=' + val.areaNumber + ">' 
+ val.name + '</option>'; 
]) 7 
$('#' + idStF) .empty(); 
$('#"' + idStr) .append (options); 
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error : function() { 


在 loadCity 函数 中 ， 通 过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ，url 参数 用 于 指定 
发 送 请 求 的 地 址 ， 这 里 为 /ccems/area/getShengAreaList， 这 个 请 求 将 映射 到 控制 器 类 
AreaController 中 的 getShengAreaList 方法 ， 方 法 的 返回 结果 作为 省 份 下 拉 列 表 的 数据 源 ; 
dataType 参数 用 于 指定 预期 服务 器 返回 的 数据 类 型 ， 这 里 指定 返回 JSON 数据 ，async 参数 
用 于 指定 是 否 发 送 异 步 请 求 ， 这 里 为 false， 表 示 同 步 请 求 ， 此 时 将 锁 住 浏览 器 ， 用 户 的 其 
他 操作 必须 等 待 请 求 完成 才 可 以 执行 ，data 参数 用 于 指定 发 送 到 服务 器 的 数据 ， 将 自动 转 
换 为 请 求 字符 串 格式 ，type 参数 用 于 指定 请 求 方式 ， 这 里 为 post 方式 ，success 参数 的 类 型 
为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 result 参数 ， 
然后 根据 接收 的 数据 生成 省 份 下 拉 列 表 的 选项 。 

在 AreaController 类 中 ，getShengAreaList 方法 的 代码 如 下 : 


package com.ccms.controller; 


import com.ccms.pojo.SysArea; 
import com.ccms.service.AreaService; 
@Controller 
QRequestMapping (value = "/area", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public class AreaController { 
@Autowired 
private AreaService areaService; 


// 获取 省 份 列表 


@RequestMapping (value = "/getSshengAreaList", method = { 
RequestMethod.GET, RequestMethod.POST }) 
@ResponseBody 


public Map<String, Object> getShengAreaList (SysArea area, 

HttpServletRequest req, HttpServletResponse resp) throws 
IOException { 

area.setType ("1"); 

List<SysArea> list = areaService.getAreaList (area); 

int count = 0; 

if (list != null && list.size() > 0) { 

count = list.size(); 

} 

Map<Sstring, Object> result = new HashMap<string, Object>(2); 

result.put ("count", count); 

result.put ("CityList", list); 

return result; 


} 
在 AreaController 类 上 标注 @Controller 注解 ， 指 示 该 类 是 一 个 控制 器 。 通 过 
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@RequestMapping 注解 将 用 户 对 /ccms/area/getShengAreaList 这 个 url 的 请 求 映 射 到 
getShengAreaList 方法 。 

在 getShengAreaList 方法 中 , 将 SysArea 类 型 的 对 象 area 的 type 属性 值 设置 为 1, 再 调 
用 业务 接口 AreaService 中 的 getAreaList 方法 ， 以 获取 省 份 信息 列表 。 

AreaService 接口 位 于 com.ccms.service 包 中 ，getAreaList 方法 的 声明 如 下 : 

Package com.ccms.service; 

import java.util.List; 

import com.ccms.pojo.SysArea; 

public interface AreaService { 

// 获取 区 域 列 表 


public List<SysArea> getAreaList (SysArea area); 


} 


在 com.cems.service.impl 包 中 ， 创 建 AreaService 接口 的 实现 类 AreaServiceImpl， 实 现 
getAreaList 方法 ， 代 码 如 下 : 


Package com.ccms.service.impl; 


import com.ccms.pojo.SysArea; 
import com.ccms.service.AreaService; 
Q@Service ("areaService") 
@Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class AreaServiceImpl implements AreaService { 
@Autowired 
AreaDao areaDao; 
@Ooverride 
public List<SysArea> getAreaList (SysArea area) { 
List list = null; 
Map<String, Object> params = new HashMap<String, Object>(); 
params.put ("area", area); 
list = areaDao.selectAreaList (params); 
return list; 


} 


在 实现 类 AreaServiceImpl 的 getAreaList 方 法 中 ,调用 了 接口 AreaDao 中 的 selectAreaList 
方法 。 在 AreaDao 接口 中 ，selectAreaList 方法 的 代码 如 下 : 


Package com.ccms.dao; 


import com.ccms.dao.provider.AreaDynaSqlProvider; 
import com.ccms.pojo.SysArea; 
Public interface AreaDao { 
@SelectProvider (type = AreaDynaSqlProvider.class, method 
"selectWithParam") 


public List<SysArea> selectAreaList (Map<String, Object> params); 
} 


selectAreaList 方法 标注 了 @SelectProvider 注解 ， 指 定 由 AreaDynaSqlProvider 类 中 定义 
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的 selectWithParam 方法 提供 需要 执行 的 SELECT 语句 。 在 AreaDynaSqlProvider 类 中 ， 
selectWithParam 方法 的 代码 如 下 : 


Package com.ccms.dao.provider; 


import java.util.Map; 
import org.apache.ibatis.jdbc.sQL; 
import com.ccms.pojo.SysArea; 
public class AreaDynaSqlProvider { 
public String selectWithParam(Map<String, Object> params) { 
SysArea area = (SysArea) params.get ("area"); 
String sql = new SQL() { 
| 
SELECT ("*"); 
FROM ("sys area"); 
WHERE (" type = #{area.type} "); 
if (area.getType() == "1") { 
WHERE ("parentId is null"); 
} 
if (area.getType() != "1") { 
WHERE ("parentId = #{area.parentId} "); 


} 
}.tostring(); 
return sql; 


} 


在 用 户 修改 对 话 框 中 ， 如 果 省 份 下 拉 列 表 选 项 发 生变 化 ， 会 触发 onchange 事件 。 处 理 
这 个 事件 的 JavaScript 函数 为 changeSheng( up)， 代 码 如 下 : 


function changeSheng (suffix) { 
var shengid = $('#sheng' + suffix) .val(); 
ht 4 uffixry val(t" "ys 
loadcity("/ccms/area/getShiAreaList", "shi" + suffix, shengid); 
$('#xian' + suffix) .val(''); 


} 


在 函数 changeSheng 中 ， 会 根据 选择 的 省 份 ， 向 后 台 服 务 器 发 送 一 个 请 求 ， 请 求 的 ul 
为 /ccms/area/getShiAreaList 。 这 个 url 请 求 将 映射 到 控制 器 类 AreaController 中 的 
getShiAreaList 方法 ， 根 据 省 份 获取 城市 列表 ， 作 为 市 下 拉 列 表 的 数据 源 。 在 AreaController 
类 中 ，getShiAreaList 方法 的 代码 如 下 : 


// 获取 城市 列表 
@RequestMapping (value = "/getShiAreaList", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public Map<Sstring, Object> getShiAreaList (SysArea area, HttpServletRequest 
req, HttpServletResponse resp) throws IOException { 

area.setType ("2"); 

List list = areaService.getAreaList (area); 

int count = 07 
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if (list != null && list.size() > 0) { 
count = list.size(); 


1 
Map<Sstring, Object> result = new HashMap<string, Object>(2); 


result.put ("count", count); 
result.put ("CityList", list); 
return result; 


} 


在 getShiAreaList 方法 中 ， 将 SysArea 类 型 的 对 象 area 的 type 属性 值 设 置 为 2， 再 调用 
业务 接口 AreaService 中 的 getAreaList 方法 ， 以 获取 城市 列表 。 

同样 ， 在 用 户 修改 对 话 框 中 ， 如 果 市 下 拉 列 表 选 项 发 生变 化 ， 会 触发 onchange 事件 。 
处 理 这 个 事件 的 JavaScript 函数 为 changeShi( up)， 如 下 所 示 : 


function changeShi (suffix) { 
var shiid = $('#shi' + suffix) .val(); 
$("#xian" + suffix) .val('™'); 
loadcCity("/ccms/area/getXxianAreaList", "xian" + suffix, shiid); 


} 


在 函数 changeShi 中 ， 会 根据 选择 的 城市 ， 向 后 台 服 务 器 发 送 一 个 请 求 ， 请 求 的 url 为 
/ccms/area/getXianAreaList 。 这 个 url 请 求 将 映射 到 控制 器 类 AreaController 中 的 
getXianAreaList 方法 , 根据 城市 获取 院 校 列表 , 作为 院 校 下 拉 列 表 的 数据 源 。 getXianAreaList 
方法 的 代码 如 下 : 

// 获取 院 校 (县 ) 列表 


@RequestMapping (value = "/getxianAreaList", method = { RequestMethod.GET, 
RequestMethod.POST }) 


@ResponseBody 
public Map<String, Object> getXianAreaList (SysArea area, HttpServletRequest 
req, HttpServletResponse resp) throws 
IOException { 

area.setType ("3"); 

List list = areaService.getAreaList (area); 

int count = 0; 

if (list != null && list.size() > 0) { 

count = list.size(); 


} 
Map<Sstring, Object> result = new HashMap<Sstring, Object>(2); 


result.put ("count", count); 
result.put ("CityList", list); 
return result; 


在 getXianAreaList 方法 中 ， 将 SysArea 类 型 的 对 象 area 的 type 属性 值 设置 为 3， 再 调 
用 业务 接口 AreaService 中 的 getAreaList 方法 ， 以 获取 院 校 列表 。 这 样 ， 就 可 以 实现 用 户 修 
改 对 话 框 中 省 、 市 、 院 校 三 个 下 拉 列 表 的 联动 了 。 

在 用 户 修改 对 话 框 中 修改 数据 ， 单 击 修改 按钮 ， 将 执行 JavaScript 函数 upUser， 其 代码 
如 下 : 
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function upUser() { 


Var name = $("#username up") .val(); 
va sheng = $("#sheng up") .val(); 
var shi = $("#shi up") .val(); 
var xian = $("#xian up") .val(); 
// 未 选择 区 域 , 提示 
if (isNull(sheng) && isNull(shi) && isNull (xian)) { 
swall({ 
title : "系统 提示 "， 
text : "请 选择 区 域 "， 


type : "warning" 


Ds; 
return; 
} 
va areald = sheng; 


a (l(ahi undefined || shi == null || shi == '')) { 
areaId shi 

} 

if (!(xian == undefined || xian == null || xian { 


areaId = Xian 


} 


var userType = 4; 


$.ajax({ 
url : '/ccms/user/upAreaAdmin', 
type : 'post', 
async : 'true', 
cache : false, 
data : { 


userCode : ucode up, 
name : name, 
userType : userType, 
areald : areald, 
delstate : del State 

}, 

dataType : 'json', 

success : function(data) { 
ff (data.isExist) { 

Swal({ 
title : "系统 提示 "， 
text : "已 存在 该 用 户 名 "， 
type : "warning" 

}, function() { 
$("#userName") .val (''); 
$("#addwin") .modal ('hide'); 

1D); 

} else if (data.existAdmin) { 
swall({ 
title : "系统 提示 "， 
text : "该 区 域 已 绑 定 管理 员 "， 
type : "warning" 
}, function() { 
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$("#sheng up") .val(''); 
$("#shi up") .val(')s 
$("#xian up") .val(''); 

4 

} else if (data.success) { 

Swal({ 
title : "系统 提示 "， 
text : "修改 成 功 "， 
type : "success" 

}, function() { 
$("#userName edit") .val(''); 
$("#upwin") .modal ('hide'); 
$('#table') .bootstrapTable ("refresh"); 


title : "系统 提示 "， 
text : "修改 失败 "， 
type : "warning" 
}, function() { 
$("#upwin") .modal ('hide'); 
$('#table') .bootstrapTable ("refresh"); 
Hy 
} 


}, 
error : function(aa, ee, rr) { 
swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
}, function() { 
]) 7 
} 


1); 

} 

在 upUser 方法 中 ， 首 先 获取 要 修改 的 区 域 管理 员 信 息 ， 然 后 通过 jQuery AJAX 方式 向 
后 台 服 务 器 发 送 请 求 , 请 求 的 地 址 为 /cems/user/upAreaAdmin, 这 个 url 请 求 将 映射 到 控制 器 
类 UserController 中 的 upAreaAdmin 方法 ; async 用 于 指定 是 否 发 送 异 步 请 求 ， 这 里 为 tue， 
表示 异步 请 求 ， 用 户 的 其 他 操作 不 必 等 待 请 求 完成 ，data 用 于 指定 发 送 到 服务 器 的 数据 ; 
success 参数 的 类 型 为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 
函数 的 data 参数 ， 然 后 根据 接收 的 数据 给 出 提示 信息 ; error 用 于 指定 请 求 失败 时 调用 的 


函数 。 
在 控制 器 类 UserController 中 ，upAreaAdmin 方法 的 代码 如 下 : 
// 修改 区 域 管理 员 
@RequestMapping (value = "/upAreaAdmin", method = { RequestMethod.GET, 


RequestMethod.POST }) 
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Public String upAreaAdmin (SysUser user, HttpServletRequest reqg, 


HttpServletResponse res) { 

jObject = new JsonObject(); 

boolean result = false; 

String operateId = 

req.getSession() .getAttribute (CommonValue .USERID) -toString() 7 

user.setOperatorId (operateId); 

// 修改 时 检验 用 户 是 否 已 存在 

String exist = userService.isExistAreaAdminName (user); 

if (exist.equals ("exit")) { 
joObject .addProperty ("isExist", true); 

} else if (exist.equals ("exitAdmin")) { 
jObject.addProperty ("existAdmin", true); 

} else if (exist.equals("no")) { 
result = userService.upAreaAdmin (user); 
jObject.addProperty("success", result); 

} 

try { 
ServletOutputstream jos = res.getOoutputstream(); 
jos.write(jObject.toSstring() .getBytes ("utf-8")); 
jos.flush(); 
jos.close(); 

} catch (IOException e) { 
e.printstackTrace () 7 

} 

return null; 


} 


在 upAreaAdmin 方法 上 ,通过 @RequestMapping 注解 ,将 用 户 对 /cems/user/upAreaAdmin 
这 个 url 的 请 求 映 射 到 upAreaAdmin 方法 。upAreaAdmin 方法 有 三 个 参数 ， 其 中 ，SysUser 
类 型 的 参数 user 用 于 封装 表单 传递 来 的 查询 条 件 。 在 upAreaAdmin 方法 中 ， 首 先 调用 业务 
接口 UserService 中 的 isExistAreaAdminName 方法 ， 检 验 用 户 是 否 已 存在 ; 然后 调用 
upAreaAdmin 方法 ， 更 新 区 域 管 理 员 信息 。 通 过 JsonObject 类 的 write 方法 ， 可 向 客户 端 浏 
览 器 发 送 JSON 格式 的 数据 。 

在 UserService 接口 中 ， 声 明 两 个 方法 ， 代 码 如 下 : 

// 查询 是 否 存在 该 区 域 管理 员 

public String isExistAreaAdminName (SysUser user); 


// 修改 区 域 管理 员 


public boolean upAreaAdmin(SysUser user); 


在 UserService 接口 的 实现 类 UserServiceImpl 中 ， 实现 这 两 个 方法 ， 代 码 如 下 : 
// 查询 是 否 存在 该 区 域 管理 员 


public String isExistAreaAdminName (SysUser user) { 


String result; 


// 查询 该 管理 员 名 是 否 存在 


int i = (Integer) userDao.isExistAreaAdminName (user); 
// 查询 该 区 域 是 否 绑 定 管理 员 
int j = (Integer) userDao.isExistAreaAdmin (user); 


bit 放 二 天 -有 》 和 
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result = "exitRdmin"7 
} else if (i > 0) { 
result = "exit"; 
} else { 
result = "no"; 


} 
return result; 

} 

// 修改 区 域 管理 员 

public boolean upAreaAdmin(SysUser user) { 
int result = userDao.upAreaAdmin (user); 
return result > 0; 


} 


在 isExistAreaAdminName 方法 中 ， 首 先 调 用 接口 UserDao 中 的 isExistAreaAdminName 
方法 ， 查 询 该 管理 员 名 是 否 存在 ; 然后 调用 isExistAreaAdmin 方法 ， 查 询 该 区 域 是 否 绑 定 
管理 员 。 

在 UserDao 接口 中 ，isExistAreaAdminName 和 isExistAreaAdmin 方法 的 代码 如 下 : 

// 查询 是 否 存在 该 区 域 管 理 员 

@Select ("select count(userCode) from sys user where name = #{name} and 

userCode <> #{userCode} and userType=#{userType} and delstate =1") 

public int isExistAreaAdminName (SysUser user); 

// 检验 该 区 域 是 否 绑 定 管理 员 

@Select ("select count (userCode) from sys_user where areaId = #{areaId} and 


userCode <> #{userCode} and userType=#{userType} and delSstate =1" 
public int isExistAreaAdmin(SysUser user); 


在 upAreaAdmin 方法 中 ， 直 接 调用 接口 UserDao 中 的 upAreaAdmin 方法 。 在 UserDao 
接口 中 ，upAreaAdmin 方法 的 代码 如 下 : 


// 更 新 区 域 管理 员 
@Update ("update sys_user set name=#{name},areaId=#{areaId}, 
operatorId=#{operatorId},operatorTime=now() " + "where userCode= 


#{userCode} and delstate=1") 
public int upAreaAdmin (SysUser user); 


区 域 管 理 员 添加 
3. 新 增 院 校 管理 员 
管理 员 名 : nytd 
在 areaAdminManager.jsp 页 面 中 ， 单 击 新 增 按钮 ， 0 
打开 区 域 管 理 员 添加 对 话 框 ， 如 图 20-9 所 示 。 -= | 
区 域 管理 员 添加 对 话 框 与 修改 对 话 框 的 布局 基本 类 人 
似 ， 此 处 不 再 列 出 。 填 写 管理 员 和 密码 ， 选 择 省 、 市 和 = | 
院 校 , 单 击 “ 添 加 ”按钮 , 将 执行 JavaScript 函数 addUser， 二 
其 代码 如 下 : Sin 
function addUser() { 
var name = $("#username add") .val (); 本 
Var psw = $("#userpsw add") .val (); 20-9 ”区 域 管 理 员 添 加 对 话 框 


var sheng = $("#sheng add") .val(); 
var shi = $("#shi add") .val(); 
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var xian = $("#zxian add") -val() 7 
if (isNull(sheng) && isNull(shi) && isNull (xian)) { 
swall({ 
title : "系统 提示 "， 
text : "请 选择 区 域 "， 


type : "warning™" 


Ds; 
return; 

E 

var areald = sheng; 

ED ， 丰 直 《 富 扑 和 undefined || shi == null || shi == ''")) { 
areaId = Shi 


} 
if (!(xian == undefined || xian == null || xian 
areaId = Xian 


} 


var userType = $("#userType add") .val(); 


$.ajax({ 
url : '/ccms/user/addAreaAdmin', 
type : 'post', 
async : 'true', 
cache : false, 
data : { 


name : name, 
psw : psw, 
userType : userType, 
areaId : areaId 
] 
dataType : 'json', 
success : function(data) { 
if (data.isExist) { 
swall({ 
title : "系统 提示 "， 
text : "已 存在 该 管理 员 名 "， 
type : "warning" 
}, function() { 
$("#username add") .val (''); 
Vhs 
} else if (data.existAdmin) { 


swall({ 
title : "系统 提示 "， 
text : "该 区 域 已 绑 定 管理 员 "， 
type : "warning" 


}, function() { 
$("#sheng add") .val (''); 
$("#shi add") .val (''); 
$("#xian add") .val(''); 
]) 


} else if (data.success) { 


Swal({ 


title : "系统 提示 "， 
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text : "添加 成 功 "， 
type : "success" 

} Tomotiont). { 
clearWin(" add"); 
$("#addwin") .modal ('hide'); 
$('#table') .bootstrapTable ("refresh"); 

Hs 

} else { 

swall({ 
title : "系统 提示 "， 
text : "添加 失败 "， 
type : "warning" 

}, function() { 
$("#name") .val (''); 
$("#psw") .val (''); 
clearWin(" add"); 

Ds; 


}, 
error : function(aa, ee, rr) { 


swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 

}, function() { 
clearWin(" add"); 
$("#addwin") .modal ('hide'); 


在 函数 addUser 中 ， 首 先 获取 表单 中 填写 的 管理 员 、 密 码 ， 省 、 市 和 院 校 等 数据 ， 然 后 
通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 , 请 求 的 地 址 为 /cems/user/addAreaAdmin, 这 
个 ul 请 求 将 映射 到 控制 器 类 UserController 中 的 addAreaAdmin 方法 ， 并 将 name、psw、 
userType 和 areald 四 个 参数 传递 过 去 。 

在 UserController 类 中 ，addAreaAdmin 方法 的 代码 如 下 : 


// 添加 区 域 管理 员 

@RequestMapping (value = "/addAreaAdmin", method = { RequestMethod.GET, 
RequestMethod.POST }) 

@ResponseBody 

public String addAreaAdmin (SysUser user, HttpServletRequest Fed 
HttpServletResponse res) throws IOException { 


jobject = new JsonObject (); 

String operateId = 
req.getSsession() .getAttribute (CommonValue .USERID) .tostring(); 

user.setOperatorId (operateId); 

user.setPsw (MD5Util .MDS5 (user.getPsw())); 

user.setUserCode("™™"); 
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user.setUserType ("4"); 
// 添加 时 检验 该 区 域 管理 员 是 否 已 存在 
String exist = userService.isExistAreaAdminName (user); 
if (exist.equals ("exit")) { 
jObject.addProperty ("isExist", true); 
} else if (exist.equals ("exitAdmin")) { 
joObject.addProperty ("existAdmin", true); 
} else if (exist.equals("no")) { 
boolean result = userService.addUser (user); 
joObject.addProperty("success", result); 
3» 
ServletOutputstream jos = res.getOutputstream(); 
jos.write(jObject.toSstring() .getBytes ("utf-8")); 
return null; 


} 


与 区 域 管理 员 修 改 功能 类 似 , 在 addAreaAdmin 方法 中 , 首先 调用 业务 接口 UserService 
中 的 isExistAreaAdminName 方法 ， 检 验 该 区 域 管理 员 是 否 已 存在 。 如 果 不 存在 ， 则 调用 业 


务 接口 UserService 中 的 addUser 方法 ， 执 行 添加 操作 。 
在 UserService 接口 中 ，addUser 方法 的 声明 如 下 : 


// 添加 用 户 


public boolean addUser (SysUser user); 


在 实现 类 UserServiceImpl 中 ， 实 现 addUser 方法 ， 代 码 如 下 : 
@Override 
public boolean addUser (SysUser user) { 
Object[] params = null; 
String code = UUIDGenerator.getUUID(); 
user.setUserCode (code); 
user.setDelstate (1); 
int result = userDao.insertUser (user); 
return result > 0; 


} 


在 addUser 方法 中 ， 首 先 调用 UUIDGenerator 类 的 getUUID 方法 ， 生 成 一 个 新 的 用 户 
编号 , 将 其 保存 在 user 对 象 中 。 然 后 直接 调用 UserDao 接口 中 的 insertUser 方法 , 将 区 域 管 


理 员 信息 插入 数据 表 sys_user 中 。 
在 UserDao 接口 中 ，insertUser 方法 的 代码 如 下 : 


// 添加 用 户 
@Insert ("insert into sys_user(userCode,name,psw,operatorId, 
delstate,unitId,userType,areaIld) " + "values(#{userCode},#{name} 


r#{psw},#{operatorId},#{delstate},#{unitId},#{userType},#{areaId})") 
public int insertUser (SYsUser user); 


输入 图 20-9 所 示 的 数据 ， 添 加 成 功 后 ， 在 区 域 管理 员 列 表 上 ， 显 示 出 新 增 的 区 域 管理 


员 记 录 ， 如 图 20-10 所 示 。 
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图 20-10 ”新 增 的 区 域 管理 员 记 录 
4. 删除 院 校 管理 员 


在 区 域 管理 员 列 表 上 ， 选 中 一 条 记录 的 复 选 框 ， 单 击 删除 按钮 ， 将 执行 JavaScript 函数 
delUser， 其 代码 如 下 : 


function delUser() { 
var ids = "''; 
var selects = $('#table') .bootstrapTable('getSelections'); 
if (selects.length <= 0) { 
swal (' 系统 提示 ' ，' 请 选择 要 删除 的 用 户 ! '， 'warning') 7 
return; 
} 
ids = "'™" + selects[0] .userCode + "'"; 
for (var i = 1; i < selects.length; i++) { 
ids += ",'" + selects[i] .userCode + "'"; 
} 
swall({ 
title : "您 确定 要 删除 这 条 信息 吗 "， 
text : "删除 后 将 无 法 恢复 ， 请 谨慎 操作 !"， 
type : "warning", 
showCancelButton : true, 
confirmButtonColor : "#DD6B55", 
confirmButtonText : "删除 "， 
cancelButtonText : "取消 "， 
closeOonConfirm : false, 
closeOnCancel : false 
}, function(isConfirm) { 
if (isConfirm) { 
$.ajax({ 
url : '/ccms/user/delUser', 
type : 'post', 
async : 'true', 


cache : false, 
data : { 
ids : ids 
}, 
dataType : 'json', 
success : function(data) { 


if (data.success) { 


swal (" 删 除 成 功 ! "，" 您 已 经 删除 了 这 条 信息 。"，"success") ; 
$('#table') .bootstrapTable ("refresh"); 
} else { 
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swall({ 
titje = “系统 提示 "， 
text : "删除 失败 "， 
type : "warning™" 


Ds 


error : function(aa, ee, rr) { 
swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
Ps 
} 
D); 
} else { 
swal ("已 取消 "， "您 取消 了 删除 操作 ! "，"error") 
} 
Ds; 
} 


在 函数 delUser 中 ， 首 先 获取 Bootstrap 的 table 控件 上 选中 的 记录 行 的 用 户 编号 ， 并 将 
这 些 编号 以 逗号 分 隔 ; 然后 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ， 请 求 的 地 址 为 
/ccms/user/delUser， 这 个 url 请 求 将 映射 到 控制 器 类 UserController 中 的 delUser 方法 ， 并 将 


参数 ids 传递 过 去 。 
在 UserController 类 中 ，delUser 方法 的 代码 如 下 : 
QRequestMapping (value = "/delUser", method = { RequestMethod.GET, 


RequestMethod.POST }) 
public String delUser (HttpServletRequest req, HttpServletResponse res) { 
String ids = req.getParameter ("ids"); 
boolean result = userService.delUser(ids, 2); 
Jobject = new JsonObject (); 
joObject.addProperty("success", result); 
try { 
ServletOoutputSstream jos = res.getOoutputstream(); 
jos.write(jObject.tostring() .getBytes ("utf-8")); 
jos.flush(); 
jos.close(); 
} catch (IOException e) { 
e.printstackTrace (); 
} 
return null; 
} 


在 UserController 类 的 delUser 方法 中 ， 调 用 业务 接口 UserService 中 的 delUser 方法 ， 
这 个 方法 有 两 个 参数 ， 第 一 个 参数 ids 是 以 逗号 分 隔 的 用 户 编 号 ， 第 二 个 参数 2 表示 删除 状 
态 。 


在 UserService 接口 中 ，delUser 方法 的 声明 如 下 : 
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// 删除 用 户 


Public boolean delUser (String ids, int flag); 


在 实现 类 UserServiceImpl 中 ， 实 现 delUser 方法 ， 代 码 如 下 : 


public boolean delUser (String ids, int flag) { 
int result = userDao.delUser(ids, flag); 
return result > 0; 


} 


在 UserServiceImpl 类 的 delUser 方法 中 ， 直 接 调用 了 接口 UserDao 中 的 delUser 方法 。 
在 接口 UserDao 中 ，delUser 方法 的 代码 如 下 : 
// 删除 用 户 ( 即 更 新 用 户 状态 ) 


@Update ("update sys_ user set delSstate=#{flag} where userCode in (${ids})") 
public int delUser(@Param("ids") String ids, @Param("flag") int flag); 


删除 区 域 管理 员 的 操作 ， 实 质 上 是 修改 区 域 管理 员 的 状态 ， 即 将 数据 表 sys_user 中 指 
定编 号 的 用 户 记录 的 delState 字段 值 设置 为 2。 


5. 根据 省 、 市 、 院 校 和 用 户 名 搜索 


在 areaAdminManagerjsp 页 面 中 ， 提 供 了 根据 省 、 市 、 院 校 和 用 户 名 查询 区 域 管理 员 的 
功能 。 首 先 需 要 为 省 份 下 拉 列 表 控件 指定 数据 源 ， 这 个 数据 源 是 在 SGfunction0 { }) 代 码 块 中 
定义 的 ， 代 码 如 下 : 


loadCity("/ccms/area/getShengAreaList", "sheng_ search", null); 


在 区 域 管理 员 修 改 功能 开发 时 ， 已 经 对 loadCity 函数 做 过 介绍 。 同 样 ， 之 前 也 介绍 过 
省 、 市 和 院 校 三 个 下 拉 列 表 的 联动 。 

选择 省 、 市 和 院 校 ， 或 输入 用 户 名 ， 单 击 搜索 按钮 ， 将 执行 JavaScript 函数 search， 其 
代码 如 下 : 


function search() { 
var name = $('#name search') .val(); 
var sheng = $("#sheng search") .val(); 
var shi = $("#shi search") .val(); 
var xian = $("#xian search") .val(); 
var areald = sheng; 
if (!(shi == undefined || shi == null || shi == '')) { 
areaId = Shi 


} 
if (!(xian == undefined || xian == null || xian == '')) { 
areaId = Xian 


于 


var userType = $('#userType search') .val(); 
$('#table') .bootstrapTable('refresh', { 
query : { 
name : name, 


areald : areald, 
SerType : "497 
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} 


在 函数 search 中 ， 首 先 获取 省 、 市 和 院 校 ， 或 用 户 名 信息 ， 然 后 调用 Bootstrap 的 table 
控件 的 refresh 方法 。 这 时 会 重新 发 送 请 求 /ccms/user/getAreaUser， 即 再 次 执行 控制 器 类 
UserController 中 的 getAreaUser 方法 ， 并 将 参数 name、areald 和 userType 传递 过 去 ， 根 据 
条 件 重 新 获取 区 域 管理 员 列 表 ， 并 显示 在 table 控件 上 。 以 查询 江苏 省 扬州 市 扬 大 扬子 津 校 
区 为 例 ， 查 询 结果 如 图 20-11 所 示 。 


二 开 夯 次 mn ed 预 州 里 Mi: 所 大 扬子 滩 校 区 四 周记 各 | = | 
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] 用 户 各 到 忆 区域 用 户 类 型 操作 人 所作 时 同 操作 
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呈 示 第 1 到 第 1 条 记录 , 苦 共 1 条 记录 
图 20-11 区域 管理 员 查 询 
20.6.2 ” 院 校 管理 


在 图 20-4 所 示 的 平台 管理 员 界 面 中 ， 单 击 院 校 管理 菜单 ， 打 开 院 校 管理 页 
schoolManager.jsp， 该 页 面 位 于 src/main/webapp/views/area 目录 下 ， 如 图 20-12 所 示 。 


图 20-12 ” 院 校 管理 页 
在 schoolManagerjsp 页 面 中 ， 需 要 实现 院 校 的 显示 、 修 改 、 添 加 和 删除 等 功能 。 
1. 显示 院 校 


为 了 以 树 形 结构 显示 院 校 信息 ， 使 用 了 zTree 插件 ， 它 是 一 个 依靠 jQuery 实现 的 多 功 
能 的 树 插件 。 在 页 面 中 ， 它 的 布局 如 下 : 


<div class="col-sm-3"> 


<ul id="schooltree" class="ztree" style="background:#fff"></ul> 
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</div> 


在 页 面 中 使 用 zTree 插件 时 ， 需 要 引用 jquery.ztree.all-3.5.js 文件 ， 如 下 所 示 : 


<script type="text/javascript" 


src="/ccms/commons/jslib/ztreeV3.5.15/jquery.ztree.all-3.5.js"> 
</script> 


在 页 面 shoolManagerjsp 中 ， 定 义 了 一 个 自 执行 函数 ， 如 下 所 示 : 


$ (function(){ 
vform('addform',addModule); 
vform('upform',upModule); 
loadschoolTree (); 

1); 


在 页 面 加载 时 ， 函 数 中 的 代码 会 被 执行 。loadSchoolTree 方法 用 来 给 zTree 插件 绑 定数 
据 ， 代 码 如 下 : 
function loadSschoolTree(){ 
$.ajax({ 


url:'/ccms/school/getTreeList', 
type: 'post', 
async:'true', 
cache:false, 
data:{}, 
dataType:'json', 
success: function(data){ 
$.fn.zTree.init($("#schooltree"), setting, data.zNodes); 


1); 
} 


在 loadSchoolTree 方法 中 , 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 , 请 求 的 地 址 
为 /ccems/school/getTreeList, 这 个 url 请 求 将 映射 到 控制 器 类 SchoolController 中 的 getTreeList 
方法 ，success 参数 的 类 型 为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 
传 给 该 函数 的 data 参数 ， 人 然后 通过 $.fh.zTree.init 填充 zTree 插件 。 绑 定数 据 源 后 ，zTree 插 
件 就 变 成 了 一 棵 院 校 树 。 

在 SchoolController 类 中 ，getTreeList 方法 的 代码 如 下 : 


package com.ccms.controller; 


import com.ccms.pojo.SysArea; 
import com.ccms.service.SchoolService; 
import com.ccms.tools.Tree; 
@Controller 
@RequestMapping (value = "/school", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public class SchoolController { 
@Autowired 
private SchoolService schoolService; 


// 获取 院 校 树 
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@RequestMapping (value = "/getTreeList", method = { 
RequestMethod.GET, RequestMethod.POST }) 
@ResponseBody 
public Map<Sstring, Object> getTreeList (HttpServletRequest req, 
HttpServletResponse resp) 
throws UnsupportedEncodingException, IOException { 
List<Tree> tree = schoolService.getschoolTree(); 
Map<String, Object> result = new HashMap<string, Object>(); 
result.put ("zNodes", tree); 
return result; 


} 


在 SchoolController 类 上 标注 @Controller 注解 ， 指 示 该 类 是 一 个 控制 器 。 并 通过 
@RequestMapping 注解 将 用 户 对 /ccms/school/getTreeList 这 个 url 的 请 求 映射 到 getTreeList 
方法 。 在 getTreeList 方法 中 ,调用 业务 接口 SchoolService 中 的 getSchoolTree 方法 ， 以 获取 
院 校 列表 。 

SchoolService 接口 位 于 com.ccms.service 包 中 ，getSchoolTree 方法 的 声明 如 下 : 


Package com.ccms.service; 
import java.util.List; 
import com.ccms.pojo.SysArea; 
import com.ccms.tools.Tree; 
public interface SchoolService { 
// 获取 院 校 树 
public List<Tree> getSschoolTree(); 
} 


在 接口 SchoolService 的 实现 类 SchoolServiceImpl 中 ， 实 现 getSchoolTree 方法 ， 代 码 
如 下 : 


Package com.ccms.service.impl; 
import com.ccms.service.SchoolService; 
import com.ccms.tools.Tree; 


@Service ("schoolService") 
@Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class SchoolServiceImpl implements SchoolService { 
@Autowired 
SchoolDao schoolDao; 
@Override 
public List<Tree> getSchoolTree() { 
List<String> attributesList = new ArrayList<string>(); 
attributesList.add("isLeaf™"); 
// 定义 了 一 个 Tree 类 型 的 对 象 rootTree， 
// 并 设置 了 相关 属性 ， 作 为 zTree 插件 的 根 结 点 


Tree rootTree = new Tree()7 


rootTree.setId (null); 
rootTree.setName (" 院 校 配置 ") ; 
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rootTree.setOpen (true); 
rootTree.setAttributes ("{\"isLeaf\": 
// 获取 院 校 / 区 域 的 所 有 父 结 点 
List<SysArea> parentAreaLst = schoolDao.getParentArea(); 
List<Tree> parentTreesLst = new ArrayList<Tree>(); 

// 将 List<sysArea> 类 型 转换 成 List<Tree> 


for (SysArea area : parentAreaLst) { 


nmONnjn) 7 


Tree rootTreeData = new Tree () 7 
rootTreeData.setId(area.getAreaNumber ()) 7 
rootTreeData.setName (area.getName ()) 7 
rootTreeData.setOpen (true) 
rootTreeData.setChecked (false) 
rootTreeData.setParent (false) 7 
rootTreeData.setNocheck (false); 
JSONObject attributesJO = new JSONObject (); 
attributesJO.put ("isLeaf", area.getIsLeaf ()); 
rootTreeData.setAttributes (attributesJO.tostring()); 
parentTreesLst.add (rootTreeData); 
} 
if (parentTreesLst != null) { 
// 遍历 List<Tree> 类 型 对 象 parentTreesLst 
for (Tree parentData : parentTreesLst) { 
// 获取 当前 父 结 点 区 域 编号 
String areaNumber = parentData.getId(); 

// 根据 当前 父 结 点 区 域 编号 , 获取 其 所 包含 的 区 域 信息 ( 子 结 点 列表 ) 
List<SysArea> list = schoolDao.getChildArea (areaNumber); 
List<Tree> treeList = new ArrayList<Tree>(); 

// 将 List<sysArea> 类 型 转换 成 List<Tree> 类 型 
for (SysArea sysArea : list) { 
Tree tempTreeData = new Tree(); 
tempTreeData.setId(sysArea.getAreaNumber ()); 
tempTreeData.setName (sysArea.getName ()); 
tempTreeData.setOpen (true); 
tempTreeData.setChecked (false); 
tempTreeData.setParent (false); 
tempTreeData.setNocheck (false); 
JSONObject attributesJO = new JSONObject (); 
attributesJO.put ("isLeaf", sysArea.getIsLeaf()); 
tempTreeData.setAttributes (attributesJO.tostring()); 
List childList = new ArrayList<Tree>(); 
// 调 用 自 定义 方法 getchildTreeById， 根 据 当前 区 域 Id ( 子 结 点 区 
// 域 编号 ) 获取 其 包含 的 区 域 信息 ( 子 子 结 点 数据 列表 ) 
childList = getCchildTreeById(sYysRrea.getRreaNumber () ) 7 
// 将 子 结 点 列表 赋值 到 父 结 点 的 children 属性 
七 esmpTreeData.setCchildren(childqList) 7 
treeList.add (tempTreeData); 
上 
// 给 parentData 结 点 设置 children 属性 


parentData.setChildren (上 treeList) 7 
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// 将 parentTreesLst 设置 到 根 结 点 对 象 rootTree 的 children 属性 


rootTree.setChildren (parentTreesLst); 
List<Tree> resultTree = new ArrayList<Tree>(); 


resultTree.add (rootTree); 
return resultTree; 


} 


在 getSchoolTree 方法 中 ， 首 先 定义 了 一 个 Tree 类 型 的 对 象 rootTree， 并 设置 了 相关 属 
性 ， 作 为 zTree 插件 的 根 结 点 。Tree 这 个 类 位 于 com.ccms.tools 包 中 ， 用 于 描述 zTree 插件 
上 的 一 个 结 点 ，Tree 类 的 定义 如 下 : 
Package com.ccms.tools; 
import java.util.List; 
public class Tree { 
Private String id; 
Private String pId; 
private String name; 
private boolean isParent; 
private boolean open; 
private boolean checked; 
private boolean nocheck; 
Private List<Tree> children; 
private String attributes; 


// 省 略 了 上 述 属性 的 getter 和 setter 方法 
// 省 略 了 hashcode 和 equals 方法 
} 
然后 调用 接口 SchoolDao 中 的 getParentArea 方法 获取 院 校 或 区 域 的 父 结 点 列表 ， 返 回 
List<SysArea> 类 型 的 对 象 parentAreaLst。 接 着 定义 了 List<Tree> 类 型 的 对 象 parentTreesLst， 
并 将 List<SysArea> 类 型 的 对 象 parentAreaLst 转换 成 List<Tree> 类 型 的 对 象 parentTreesLst， 
此 时 parentTreesLst 中 每 个 元 素 的 children 属性 还 没有 赋值 。 之 后 遍历 对 象 parentTreesLst， 
每 次 遍历 都 是 先 获取 当前 父 结 点 区 域 编 号 ， 再 调用 接口 schoolDao 中 的 getChildArea 方法 ， 
根据 当前 父 结 点 区 域 编 号 获取 其 所 包含 的 区 域 信息 ( 即 子 结 点 列表 )， 并 将 作为 返回 结果 的 
List<SysArea> 类 型 的 对 象 list 转换 成 List<Tree> 类 型 的 对 象 teeList。 在 这 个 转换 过 程 中 会 调 
用 自 定义 方法 getChildTreeById， 根 据 当 前 区 域 编 号 ( 子 结 点 区 域 编 号 ) 获 取 其 所 包含 的 区 域 
信息 ( 子 子 结 点 列表 )。 在 自 定 义 方 法 getChildTreeById 中 ， 会 递归 调用 getChildTreeById 方 
法 ， 从 而 为 每 个 Tree 结 点 都 设置 children 属性 值 。 转 换 完成 后 ， 将 对 象 treeList 设置 到 当前 
遍历 元 素 的 children 属性 。 这 样 遍 历 结 束 时 ，parentTreesLst 列表 中 每 个 元 素 的 children 属性 
都 有 了 值 。 最 后 将 parentTreesLst 设置 到 根 结 点 对 象 rootTree 的 children 属性 ， 再 将 这 个 根 
结 点 对 象 rootTree 添加 到 List<Tree> 类 型 的 对 象 resultTree 并 返回 。 
在 接口 SchoolDao 中 ，getParentArea 方法 从 数据 表 sys_area 中 获取 区 域 的 父 结 点 列表 ， 
代码 如 下 : 
// 获取 区 域 的 父 结 点 列表 


@Select ("select * from sys_area where ParentId is null or parentId = '' order 


by sortNum asc") 
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public List<SysRrea> getParentArea(); 


在 接口 SchoolDao 中 ，getChildArea 方法 根据 当前 父 结 点 区 域 编号 ， 获 取 其 所 包含 的 区 
域 信息 ， 如 下 所 示 : 
// 获取 所 有 子 结 点 


@Select ("select * from sys_area where parentId=#{areaNumber} order by sortNum 


asc") 
public List<SysArea> getChildArea (@Param("areaNumber") String 


areaNumber); 


绑 定 数据 源 后 ，zTree 插件 就 变 成 了 一 个 院 校 菜单 树 。 


2. 修改 院 校 
在 院 校 菜单 树 上 ， 单 击 一 个 结 点 ， 打 开 修 改 院 校 界面 ， 如 图 20-13 所 示 。 
回 


修改 辽 入 
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20-13 ”修改 院 校 界面 


在 页 面 schoolManager.jsp 的 loadSchoolTree 方法 中 , 使 用 $.fn.zTree.init 填充 zTree 插件 
时 ，init 方法 还 指定 了 一 个 JSON 格式 的 参数 setting， 这 个 参数 的 内 容 如 下 : 


var setting = { 

check: { 
enable: true, 
autoCcheckTrigger: true, 
chkstyle: "checkbox", 
chkboxType: { “"Y": "s", "N": "ps" } 

ls 

data: { 
simpleData: { 

enable: false, 

} 

}, 

edit:{ 
enable: true, 
showRemoveBtn: false, 
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showRenameBtn: false, 


drag: { 
autoExpandTrigger: true, 
prev: false, 
inner: true, 
next: false 
} 
}, 
callback:{ 
onClick: zTreeOnClick, 
onDrop:zTreeOnDrop, 
beforeDrop: zTreeBeforeDrop 
} 
}; 


因此 ， 在 院 校 菜单 树 上 单 击 结 点 时 ， 会 触发 onClick 事件 ， 处 理 这 个 事件 的 JavaScript 
函数 为 zTreeOnClick， 这 个 函数 的 代码 如 下 : 


// 结 点 点 击 事件 
function zTreeOnClick(event, treelId, treeNode) { 
$('#addwin') .hide(); 
ifE(isSelected("schooltree") ) 
if(getSelected("schooltree") .id!="null") 
{ 
$('#upwin') .show(); 
loadSingleData (getSelected("schooltree") .id); 
jelse 
{ 
$("#addwin") .hide () 7 
$("#upwin") -hide () 7 


} 


在 页 面 schoolManager.jsp 中 ， 有 添加 院 校 和 修改 院 校 两 个 表单 ， 添 加 院 校 表单 定义 在 
id 为 addwin 的 <div> 标 签 中 的 ， 修 改 院 校 表单 定义 在 id 为 upwin 的 <div> 标 签 中 。 在 函数 
zTreeOnClick 中 ， 首 先 隐藏 添加 院 校 表单 ， 然 后 显示 修改 院 校 表单 ， 再 调用 JavaScript 函数 
loadSingleData， 其 代码 如 下 : 


// 加 载 单 条 数据 
function loadSingleData(id) { 
$-ajax({ 
url : '/ccms/school/getsingleData', 
dataType : 'json', 
data : { 
bE 
}, 
type : "post', 
success : function(data) { 
$("#pname edit") .val (data.moduleData.parentName); 
$("#id up") .val (data.moduleData.areaNumber); 


< ee ee 


第 20 章 校园 通讯 管理 系统 


$("#moduleCode edit") .val (data.moduleData.areaNumber); 

$("#moduleName edit") .val (data.moduleData.name); 

$("#parentCode edit") .val (data.moduleData.parentId); 

$("#isLeaf edit>input [name="'isLeaf'] :checked") .prop( 

'checked', false); 
$("#isLeaf" + data.moduleData.isLeaf + " edit") .prop( 
'checked', true); 

$("#sortNumber edit") .val (data.moduleData.sortNum); 

$("#areatype up") .val (data.moduleData.type); 

if (data.moduleData.areaNumber == '') { 
$("#id up") .attr('disabled', true); 
$("#moduleName edit") .attr('disabled', true); 
$("#moduleCode edit") .attr('disabled', true); 
$("#modulePath edit") .attr('disabled', true); 
$("#parentCode edit") .attr('disabled', true); 
$("#areatype up") .attr('disabled', true); 
$("#isLeaf edit input[name='isLeaf']").attr( 

'disabled', true); 

$("#sortNumber edit") .attr('disabled', true); 

} else { 
$("#id up") .attr('disabled', true); 
$("#moduleName edit") .attr('disabled', false); 
$("#areatype up") .attr('disabled', false); 
$("#moduleCode edit") .attr('disabled', false); 
$("#modulePath edit") .attr('disabled', false); 
$("#parentCode edit") .attr('disabled', false); 
$("#isLeaf edit input [name='isLeaf']") .attr( 

'disabled', false); 

$("#sortNumber edit") .attr('disabled', false); 


}, 
error : function() { 


swal (" 系 统 提 示 ' ， ' 抱 歉 ， 数 据 加 载 失 败 。'， 'info7') 7 


Ds; 

} 

在 函数 loadSingleData 中 , 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 , 请 求 的 地 址 
为 /ccms/school/getSingleData ， 这 个 url 请 求 将 映射 到 控制 器 类 SchoolController 中 的 
getSingleData 方法 ， 并 将 表示 区 域 或 院 校 编号 的 参数 id 传递 过 去 ;success 参数 的 类 型 为 
Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 参数 data， 再 将 
接收 的 数据 绑 定 到 修改 院 校 表单 中 的 父 结 点 、 编 号 、 院 校 名 称 、 类 别 、 是 否 叶 子 结 点 和 排 
序号 六 个 元 素 中 。 

在 SchoolController 类 中 ，getSingleData 方法 的 代码 如 下 : 


// 根据 id 获取 单条 数据 

@RequestMapping (value = "/getSingleData"，method = { RequestMethod.GET, 
RequestMethod.POST }) 

@ResponseBody 
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public Map<String, Object> getSingleData (String id, HttpServletRequest reqg, 


HttpServletResponse resp) 
throws UnsupportedEncodingException, IOException { 
SysArea info = schoolService.getsingleDate(id); 
Map<String, Object> result = new HashMap<String, Object>(); 
result.put ("moduleData", info); 
return result; 


} 


在 getSingleData 方法 中 ,调用 业务 接口 SchoolService 中 的 getSingleDate 方法 ,根据 选 
中 结 点 编号 获取 单个 结 点 数据 。 
在 接口 SchoolService 中 ，getSingleDate 方法 的 代码 声明 如 下 : 


// 根据 id 获取 院 校 


Public SysArea getSingleDate (String areaNumber) 


在 接口 SchoolService 的 实现 类 SchoolServiceImpl 中 ， 实 现 getSingleDate 方法 ， 代 码 
如 下 : 


@Override 
public SysArea getSingleDate (String areaNumber) { 
return schoolDao.getSingleData (areaNumber); 


} 


在 上 述 getSingleDate 方法 中 ， 直 接 调用 了 接口 SchoolDao 中 的 方法 getSingleData。 在 
SchoolDao 接口 中 ，getSingleData 方法 的 代码 如 下 : 


// 获取 单条 数据 
Qselect ("select sac.*, (case when sac.parentId is null then ' 院 校 配置 ' else 
sap.name end) as parentName " 

+ "from sys area as sac left join sys area as sap on sac.parentId 
= sap.areaNumber " 

+ "where sac.areaNumber = #{areaNumber} order by sortNum asc") 
public SysArea getSingleData (@Param("areaNumber") String areaNumber); 


至 此 ， 在 修改 院 校 表单 中 ， 数 据 绑 定 就 完成 了 。 接 下 来 ， 修 改 院 校 名 称 、 类 别 、 是 和 否 
叶子 结 点 和 排序 号 这 四 项 信息 ， 再 单 击 修改 按钮 ， 会 执行 JavaScript 函数 upModule， 代 码 
如 下 : 


function upModule() { 
var id = $("#id up") .val()7 
va moduleName = $("#moduleName edit") .val(); 
va moduleCode = $("#moduleCode edit") .val(); 
var modulePath = $("#modulePath edit") .val(); 
Var parentCode = $("#parentCode edit") .val(); 
var isLeaf = $("#isLeaf edit input[name='isLeaf'] :checked") 


-VAL()s 
va sortNumber = $("#sortNumber edit") .val(); 
Var areatype = $("#areatype up") .val(); 
if (areatype == 0) { 
Swal({ 


title : "系统 提示 "， 
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text : "请 选择 类 别 "， 
type : "warning™" 
Ds; 
} 


$.ajax({ 
url : '/ccms/school/upschool', 
type : 'post', 
async : 'true', 
cache : false, 
data : { 


areaNumber : id, 
areaNumber : moduleCode, 
name : moduleName, 
parentId : parentCode, 
isLeaf : isLeaf, 
sortNum : sortNumber, 
type : areatype 

] 


dataType : 'json', 
success : function(data) { 
if (data.exist == 'existName') { 
swall({ 


title : "系统 提示 "， 
text : "已 存在 该 名 称 "， 
type : "warning" 

}, function() { 
$("#moduleName edit") .val(''); 

]) 7 

} else if (data.success) { 

swall({ 
title : "系统 提示 "， 
text : "修改 成 功 "， 
type : "success" 

}, function() { 
loadschoolTree (); 


Swal({ 
title : "系统 提示 "， 
text : "修改 失败 "， 
type : "warning" 
i 


error : function(aa, ee, rr) { 
swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 


type : "warning™" 


Ds; 
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} 


在 函数 upModule 中 ,首先 获取 修改 后 的 结 点 信息 ,通过 jQuery AJAX 方式 向 后 台 服 务 
器 发 送 请 求 ， 请 求 的 地 址 为 /ccms/schoolupSchool， 这 个 url 请 求 将 映射 到 控制 器 类 
SchoolController 中 的 upModule 方法 ; data 参数 用 于 指定 发 送 到 服务 器 的 数据 ; success 参数 
的 类 型 为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 参数 
data， 然 后 根据 接收 的 数据 给 出 提示 信息 。 

在 控制 器 类 ModuleController 中 ，upModule 方法 的 代码 如 下 : 


@RequestMapping (value = "/upschool", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public String upModule (SysArea area, HttpServletRequest Fred 
HttpServletResponse resp) 
throws UnsupportedEncodingException, IOException { 
JSONObject jsonObject = new JSONObject (); 
int result = schoolService.upSchool (area); 
if (result > 0) { 
jsonOobject.put ("success", "true"); 


} 

resp.getOoutputstream() .write (jsonobject.toString() .getBytes ("utf-8") 
); 

resp.getOoutputstream() .flush(); 

return null; 


} 

在 upModule 方法 中 ， 调 用 业务 接口 SchoolService 中 的 upSchool 方法 执行 更 新 操作 。 
在 接口 SchoolService 中 ，upSchool 方法 的 声明 如 下 : 

// 修改 


public int upSchool (SysArea area); 


在 实现 类 SchoolServiceImpl 中 ， 实 现 upSchool 方法 ， 代 码 如 下 : 


@Override 
public int upSchool (SysArea area) { 
return schoolDao.updateschool (area); 


} 
在 上 述 upSchool 方法 中 , 直接 调用 接口 SchoolDao 中 的 updateSchool 方法 ,代码 如 下 : 
// 更 新 


@Update ("update sys area set name = #{name},type= #{type}, 
sortNum=#{sortNum},isLeaf=#{isLeaf} where areaNumber=#{areaNumber}") 
public int updateschool (SysArea area); 


至 此 ， 修 改 院 校 功 能 就 讲解 完了 。 接 下 来 ， 介 绍 添加 院 校 功能 的 实现 过 程 。 
3. 添加 院 校 


在 院 校 管理 页 schoolManagerjsp 中 ， 单 击 一 个 非 叶 子 结 点 (如 扬州 )， 再 单 击 新 增 按钮 ， 
打开 添加 院 校 界面 ， 如 图 20-14 所 示 。 
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20-14 ”添加 院 校 界面 
单 击 新 增 按钮 时 ， 将 执行 JavaScript 函数 showAdd， 其 代码 如 下 : 


// 显 示 添 加 窗口 
function showAdd() { 
if (isSelected("schooltree")) { 
// 判断 院 校 树 上 选择 的 结 点 是 否 为 叶子 结 点 


var node = jsonToObj (getSelected("schooltree") .attributes); 


if (node.isLeaf == !1') { 
swal (' 系统 提示 ' ，' 该 结 点 为 叶子 结 点 !'，'warning'); 
return; 


} 
// 获取 选择 的 结 点 中 的 区 域 / 院 校 名 称 
$("#pname add") .val (getSelected("schooltree") .name); 
// 获取 选择 的 结 点 中 的 区 域 / 院 校 编号 
$("#parentCode") .val (getSelected("schooltree") .id); 
// 隐藏 修改 院 校 表单 
$('#upwin') .hide()7 
// 显示 添加 院 校 表单 
$('#addwin').show(); 

} else { 
swal ("系统 提示 "，" 请 选择 父 结 点 "，"warning"); 

} 

} 


在 函数 showAdd 中 ， 首 先 判断 院 校 树 上 选择 的 结 点 是 否 为 叶子 结 点 。 如 果 不 是 叶子 结 


点 ， 就 获取 选择 的 结 点 中 的 区 域 / 院 校 名 称 和 编号 ， 然 后 隐藏 修改 院 校 表 单 ， 并 显示 添加 院 
校 表单 。 


在 添加 院 校 表单 中 ， 填 写 编号 、 名 称 、 类 别 、 是 否 叶子 结 点 和 排序 号 这 5 项 信息 ， 单 
击 添加 按钮 ， 将 执行 JavaScript 函数 addModule， 其 代码 如 下 : 
// 添 加 


Eunction addModule() { 
var id = $("#id") .val(); 


Var name = $("#moduleName") .val (); 
var areatype = $("#areatype") .val (); 
if (areatype == 0) { 
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swall(f{ 
title : "系统 提示 "， 
text : "请 选择 类 别 "， 
type : "warning" 
Ds; 
} 
Var parentId = $("#parentCode") .val (); 
var isLeaf = $("#isLeaf add input [name='isLeaf'] :checked") 
VAL 
var sortNumber = $("#sortNumber") .val (); 
if (sortNumber 


sortNumber = 
3 
$.ajax({ 
url : '/ccms/school/addschool', 
type : 'post', 
async : 'true', 
cache : false, 
data : { 


areaNumber : id, 
name : name, 
parentId : parentId, 
isLeaf : isLeaf, 
sortNum : sortNumber, 
type : areatype 

}, 


dataType : 'json', 
success : function(data) { 
if (data.exist == 'existName') { 
Swal({ 


title : "系统 提示 "， 
text : "已 存在 该 名 称 "， 
type : "warning" 

}, function() { 
$("#moduleName") .val (''); 

]) 7 

} else if (data.success) { 

swall({ 
title : "系统 提示 "， 
text : "添加 成 功 "， 
type : "success" 

}, function() { 
$("#id") .val (''); 
$("#moduleName") .val (''); 
$("#modulePath") .val (''); 
$ ("#parentCode") .val (''); 
$("#isLeaf add input[name="'isLeaf'] :checked") 

.attr('checked', false); 
$ ("#sortNumber") .val (''); 
$("#addwin") .modal ('hide'); 
loadschoolTree(); 
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title : "系统 提示 "， 
text : "添加 失败 "， 


type : "warning" 


error : function(aa, ee, rr) { 
swal({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
}, function() { 
Fh 
} 
D's 
} 


在 函数 addModule 中 ， 首 先 获取 表单 中 填写 的 院 校 信息 ， 然 后 通过 jQuery AJAX 方式 
向 后 台 服 务 器 发 送 请 求 ， 请 求 的 地 址 为 /cems/school/addSchool， 这 个 url 请 求 将 映射 到 控制 
器 类 SchoolController 中 的 addModule 方法 ; data 参数 用 于 指定 发 送 到 服务 器 的 数据 ; success 
参数 的 类 型 为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 
data 参数 ， 然 后 根据 接收 的 数据 给 出 提示 信息 ; error 用 于 指定 请 求 失败 时 调用 的 函数 。 

在 控制 器 类 SchoolController 中 ，addModule 方法 的 代码 如 下 : 


// 添加 院 校 
@RequestMapping (value = "/addschool", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public String addModule (SysArea area, HttpServletRequest reqg, 
HttpServletResponse resp) 
throws UnsupportedEncodingException, IOException { 
JSONObject jsonObject = new JSONObject (); 
// 添加 操作 
int result = schoolService.addschool (area); 
if (result > 0) { 
jsonObject.put ("success", "true") 7 
resp.getOutputstream() .write(jsonObject.tostring(). 
getBytes ("utf-8")); 
resp.getOutputstream() .flush(); 
return null; 


} 


在 addModule 方 法 中 , 调用 业务 接口 SchoolService 中 的 addSchool 方 法 ,在 SchoolService 
接口 中 ，addSchool 方法 的 声明 如 下 : 


// 添加 
public int addschool (SysArea area); 
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在 实现 类 SchoolServiceImpl 中 ， 实 现 addSchool 方法 ， 代 码 如 下 : 


@Override 
public int addSschool (SysArea area) { 
return schoolDao .insertSchool (area); 


} 


在 SchoolServiceImpl 类 的 addSchool 方法 中 ， 直 接 调 用 了 接口 SchoolDao 中 的 
insertSchool 方法 ， 向 数据 表 sys_area 中 插入 一 条 记录 。insertSchool 方法 的 代码 如 下 : 
// 添加 


@Insert ("INSERT INTO sys area (areaNumber, name, type, parentId, isLeaf, 
sortNum, delState) VALUES "+ "(#{areaNumber}, #{name}, 

#{type}, #{parentId}, #{isLeaf}, #{sortNum}, 1)") 

Public int insertSchool (SysArea area); 


日 院 术 配置 

以 在 扬州 市 这 个 结 点 下 添加 院 校 扬州 工 职 院 为 例 ， 测 试 下 Be 
下 添加 院 校 功能 。 在 添加 院 校 表单 中 ,首先 填写 编号 yzgzy， 名 Dh 
称 为 扬州 工 职 院 ， 类 别 为 院 校 ， 选 中 叶子 结 点 ， 排 序号 为 4， Ba 
然后 单 击 添加 按钮 。 此 时 ， 可 以 看 到 院 校 树 上 ， 扬 州 这 个 结 点 一 
下 多 了 一 个 子 结 点 扬州 工 职 院 ， 如 图 20-15 所 示 。 Oat 

至 此 ， 添 加 院 校 功能 就 讲解 完了 。 接 下 来 ， 介 绍 删除 院 校 口 癌 扬州 工本 阮 
功能 的 实现 过 程 。 Oe 

4. 删除 院 校 图 20-15 院 校 树 


在 院 校 管理 页 schoolManagerjsp 中 , 单 击 一 个 叶子 结 点 (如 扬州 工 职 院 )， 再 单 击 删除 按 
钮 ， 将 执行 JavaScript 函数 delModule， 其 代码 如 下 : 
function delModule() { 
var ids = ''; 


Var selects = getCheckeds('schooltree', true); 


if (selects == null) { 
swal (' 系统 提示 ' ，' 请 选择 要 删除 的 模板 ! '，'warning'); 
return; 


和 Ss 二 electslOols td + "ny 
for (var i = 1; i < selects.length; i++) { 


if (selects[i].id == 0) { 
swal (' 系 统 提示 ' ，' 请 勿 删除 根 结 点 ! '，'warning'); 
return; 


} 
5 f= electelilsid # ms 
} 
swall 
4 
title : "您 确定 要 删除 吗 "， 
text : "删除 后 将 无 法 恢复 ， 请 谨慎 操作 !" 
type : "warning", 
showCancelButton : true, 
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confirmButtonColor : "#DD6B55", 
confirmButtonText : "删除 "， 
cancelButtonText : "取消 "， 
closeOonConfirm : false, 
closeOnCancel : false 

hs 

function(isConfirm) { 
if (isConfirm) { 


$.ajazx({ 
url : '/ccms/school/delschool', 
type : 'post', 


async : 'true', 
cache : false, 
contentType : "application/x-www-form-urlencoded; 
charset=utf-8", data : { 
ids : ids 
} 7， 
dataType : 'json', 
success : function(data) { 
if (data.success) { 
swal (" 系 统 提示 ! "， "删除 成 功 ! "， 
"success"); 
loadSchoolTree () 7 
} else { 
Swal({ 
title : "系统 提示 "， 
text : "删除 失败 "， 
type : "warning" 
1); 


} 7， 
error : function(aa, ee, rr) { 
swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
1); 


DD); 
} else { 
swal ("已 取消 "，" 您 取消 了 删除 操作 ! "， "error") 
} 
]) 
} 


在 函数 delModule 中 , 首先 获取 院 校 树 上 选择 的 叶子 结 点 , 并 以 逗号 分 隔 保存 在 变量 ids 
中 ; 然后 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ， 请 求 的 地 址 为 
/ccms/school/delSchool, 这 个 url 请 求 将 映射 到 控制 器 类 SchoolController 中 的 deleteBatch 方 
法 ; data 参数 用 于 指定 发 送 到 服务 器 的 数据 ， 这 里 为 ids。 

在 控制 器 类 SchoolController 中 ，deleteBatch 方法 的 代码 如 下 : 
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// 删除 
@RequestMapping (value = "/delschool", method = { RequestMethod.GET, 


RequestMethod.POST }) 
public String deleteBatch (HttpServletRequest req, HttpServletResponse resp) 
throws UnsupportedEncodingException, IOException { 
JSONObject jsonObject = new JSONObject(); 
req.setCharacterEncoding ("utf-8"); 
String ids = req.getParameter ("ids"); 
// 删除 数据 
boolean result = schoolService.delschool(ids) > 0; 
jsonOobject.put ("success", result); 
resp.getOutputstream() .write (jsonobject.toString() . 
getBytes ("utf-8")); 
resp.getoutputstream() .flush(); 
return null; 


} 


在 deleteBatch 方法 中 ， 调 用 了 业务 接口 SchoolService 中 的 delSchool 方法 。 在 
SchoolService 接口 中 ，delSchool 方法 的 声明 如 下 : 


// 删除 
public int delSchool (String ids); 


在 实现 类 SchoolServiceImpl 中 ， 实 现 delSchool 方法 ， 如 下 所 示 : 


@Override 
public int delSchool (String ids) { 
return schoolDao .deleteSchool (ids); 
} 
在 SchoolServiceImpl 类 的 delSchool 方法 中 , 直接 调用 接口 SchoolDao 中 的 deleteSchool 
方法 ， 从 数据 表 sys_area 中 删除 指定 编号 的 记录 。 
在 SchoolDao 接口 中 ，deleteSchool 方法 的 代码 如 下 : 


// 删除 
@Delete ("delete from sys_ area where areaNumber in (${ids})") 
public int dqeleteSchool (@Param("ids") String ids); 


以 删除 院 校 扬州 工 职 院 为 例 ， 测 试 一 下 删除 院 校 功 能 。 在 院 校 树 上 ， 首 先 选中 扬州 工 
职 院 这 个 结 点 的 复 选 框 ， 然 后 单 击 删除 按钮 。 此 时 ， 院 校 树 上 就 看 不 到 这 个 结 点 了 。 
至 此 ， 实 现 了 院 校 的 显示 、 修 改 、 添 加 和 删除 功能 。 


20.7” 院 校 管理 员 功 能 


在 后 台 登 录 页 中 ， 以 用 户 名 yzd、 密 码 123456 登录 系统 ， 以 院 校 管理 员 的 身份 进入 系 
统 首页 面 index.jsp， 如 图 20-5 所 示 。 

院 校 管理 员 功 能 包括 单位 管理 和 用 户 权限 管理 ， 单 位 管理 包括 单位 设置 ， 用 户 权限 管 
理 包 括 用 户 管理 和 角色 管理 。 
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用 户 是 依附 在 单位 之 上 的 ， 用 户 可 以 绑 定 由 平台 管理 员 提 供 的 一 个 或 多 个 角色 。 


20.7.1 单位 管理 


在 校园 通讯 管理 系统 中 ， 学 校 的 单位 是 学 生 、 教 师 、 宿 舍 楼 、 院 系 、 后 勤 部 门 等 某 一 
个 体 或 群体 。 
在 图 20-5 所 示 的 院 校 管理 员 界 面 中 ， 单 击 单位 管理 栏目 下 的 单位 设置 菜单 ， 打 开 单位 
设置 页 unitmfojsp， 该 页 面 位 于 src/main/webapp/views/unit 目录 下 ， 如 图 20-16 所 示 。 


图 20-16 单位 设置 页 


在 单位 设置 页 unitInfojsp 中 ， 需 要 实现 单位 列表 的 显示 、 添 加 、 修 改 、 删 除 ， 以 及 根 
据 单位 名 称 和 单位 类 别 搜索 等 功能 。 


1. 显示 单位 列表 
为 了 显示 单位 列表 ， 定 义 了 一 个 id 为 table 的 <table> 标 签 ， 如 下 所 示 : 
<!-- 单位 列表 显示 --> 


<div class="ibox-content"> 
<table id="table" data-click-to-select="true" > </table> 
</div> 


然后 通过 JavaScript 对 这 个 <table> 标 签 进 行 初始 化 ， 代 码 如 下 : 
Var S$table = $('#table'); 
$table.bootstrapTable ({ 
url: "/ccms/unitinfo/queryUnitInfoList table", 
dataType: "json", 
method: "post'y 
contentType: "application/x-www-form-urlencoded", 
pagination: true, 
PageSize: 30, 
pageNumber:1, 
singleSelect: false, 
checkboxHeader: true, 
clickToSelect: true, 
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queryParamsType : "undefined", 
queryParams: function queryParams (params) { // 设置 查询 参数 
var param = { 


page: params.pageNumber, 
rows: params.pageSize 

] 7 

return param; 


}, 
cache: false, 
sidePagination: "server"，// 服务 端 处 理 分 页 
columns: [{ 
checkbox: true 
}, 
{ 
title: ' 单 位 名 称 '， 
field: 'name', 
valign: "middle'" 


title: ' 单 位 类 别 '， 
field: ‘'unitType', 
//align: 'center', 
valign: "middle'" 


title: ' 编 码 '， 

field: 'outside code', 
//align: 'center', 
valign: "middle'" 


1); 

]) 

通过 调用 bootstrapTable 方法 ， 将 <table> 标 签 创建 为 Bootstrap 的 table 控件 ， 并 通过 设 
置 一 系列 属性 来 初始 化 这 个 table 控件 。url 属性 用 于 设置 table 控件 的 数据 源 ， 这 里 为 
/ccms/unitinfo/queryUnitInfoList_table, 这 个 url 请求 将 映射 到 后 台 控制 器 类 UnitfnfoController 
中 的 queryUnitInfoList_Table 方法 ， method 属性 用 于 设置 请 求 方式 ， 这 里 为 post 方式 ; 
contentType 属性 用 于 设置 发 送 到 服务 器 的 数据 编码 类 型 ， 这 里 为 application/x-www- 
form-urlencoded; dataType 属性 用 于 设置 服务 器 返回 的 数据 类 型 ， 这 里 为 json; pagination 
属性 用 于 设置 是 否 显示 分 页 ， 这 里 为 tue， 表 示人 允许 分 页 ， pageSize 属性 用 于 设置 每 页 的 记 
录 行 数 ， 这 里 为 30; pageNumber 属性 用 于 设置 首页 页 码 ， 这 里 为 1; singleSelect 属性 用 于 
设置 是 否 单 选 ， 这 里 为 false， 表 示 可 以 多 选 ; queryParamsType 属性 用 于 设置 参数 格式 ， 这 
里 为 undefined; queryParams 属性 用 于 设置 查询 参数 ,Bootstrap 的 table 控件 会 将 page 和 rows 
两 个 参数 传递 到 控制 器 类 UnitInfoController 中 的 queryUnitInfoList_Table 方法 ; cache 属性 用 
于 设置 是 否 启用 AJAX 数据 缓存 ， 这 里 为 false， 表 示 禁 用 ; sidePagination 属性 用 于 设置 在 
哪里 进行 分 页 , 可 选 值 为 client 或 者 server, 这 里 为 server, 表示 由 服务 端 处 理 分 页 ; columns 
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属性 用 于 设置 列 。 
在 控制 器 类 UnitInfoController 中 ，queryUnitInfoList_Table 方法 的 代码 如 下 : 


package com.ccms.controller; 
import com.ccms.service.UnitInfoService; 
import com.google.gson.JsonObject; 


@Controller 
@RequestMapping ("/unitinfo") 
Public class UnitInfoCcontroller { 
@Autowired 
UnitInfoService unitInfoSservice; 
// 单位 列表 分 页 显示 
@RequestMapping ("/queryUnitIinfoList table") 
@ResponseBody 
Public Map<String, Object> queryUnitInfoList_Table (Integer page, 
Integer rows, String nameOrCode, String unitTypelId, 
String unitGradelId, HttpServletRequest req, HttpServletResponse 
resp) throws IOException { 
// 从 session 中 获取 当前 登录 用 户 的 区 域 编号 
String areaId = 
req.getSession() .getAttribute ("AREANUMBER") .tostring(); 
// 初始 化 分 页 类 对 象 
Pager pager = new Pager() 7 
pager.setCurPage (page); 
pager.setPerPageRows (rows); 
// 创建 对 象 params， 用 于 封装 查询 条 件 
Map<String, Object> params = new HashMap<String, Object>(); 
params.put ("nameOrCode", nameOrCode); 
params.put ("unitTypeId", unitTypeId); 
params.put ("unitGradeId", unitGradeId); 
params.put ("areaIld", areald); 
// 获取 满足 条 件 的 单位 总 数 
int totalCount = unitInfoService.count (params); 
// 根据 查询 条 件 获取 当前 页 的 单位 列表 
List<ProUnitinfo> list = 
unitIinfoService.queryUnitIinfoList Table(params, pager); 
// 创建 对 象 result， 用 于 保存 返回 结果 
Map<String, Object> result = new HashMap<String, Object>(2); 
result.put ("total", totalCount); 
result.put ("rows", list); 
return result; 


在 queryUnitInfoList_Table 方法 中 ， 首 先 从 session 中 获取 当前 登录 用 户 的 区 域 编号 ; 
然后 初始 化 一 个 分 页 类 对 象 pager， 给 其 设置 curPage 和 perPageRows 两 个 属性 值 ， 接 着 创 
建 Map<String，Objecf> 类 型 的 对 象 params， 用 于 封装 查询 条 件 ; 接 下 来 依次 调用 业务 接口 
UnitmfoService 的 count 方法 获取 满足 条 件 的 单位 总 数 ， 调 用 queryUnitInfoList Table 方法 
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获取 满足 条 件 的 单位 列表 ， 再 创建 Map<String, Object> 类 型 的 对 象 result， 保 存 查 询 结果 数 
据 最 后 将 返回 结果 转 为 JSON 格式 ， 以 字符 串 的 形式 发 送 到 前 端 页 面 unitInfo.jsp， 为 
Bootstrap 的 table 控件 提供 数据 源 。 

在 业务 接口 UnitInfoService 中 ， 声 明 两 个 方法 ， 如 下 所 示 : 

// 获取 满足 条 件 的 单位 总 数 

Integer count (Map<Sstring, Object> params); 

// 分 页 显示 单位 列表 

Public List<ProUnitinfo> queryUnitInfoList Table (Map<String, Object> params, 

Pager pager); 


在 接口 UnitInfoService 的 实现 类 UnitInfoServiceImpl 中 ， 实 现 count 方法 ， 如 下 所 示 : 
QOverride 
Public Integer count (Map<String, Object> params) { 

return unitIinfoDao.count (params) .size(); 


} 


在 上 述 count 方 法 中 ， 直 接 调 用 了 接口 UnitInfoDao 中 的 count 方法 。 在 UnitInfoDao 接 
口中 ，count 方 法 的 代码 如 下 : 
// 根据 条 件 查询 总 数 


Q@SelectProvider (type = UnitInfoDynaSsqlProvider.class, method = "count") 
List<ProUnitinfo> count (Map<String, Object> params); 


在 上 述 count 方法 中 ， 通 过 调用 UnitInfoDynaSqlProvider 类 中 的 count 方法 返回 需要 执 
行 的 SELECT 语句 。 在 UnitInfoDynaSqlProvider 类 中 ，count 方法 的 代码 如 下 : 
// 动态 查询 总 记录 数 


public String count (Map<String, Object> params) { 
String sql = "select u.*,pt.name as unitType,pg.name as unitGrade from 
pro _ unitinfo u "+ "left join pro paraminfo pt on u.unitTypelId = pt.id " 
+ "left join pro_paraminfo pg on u.unitGradeId = pg.id " + "where 
u.delstate='1' and 1=1"; 


if (params.get ("nameOrCode") != null) { 
String nameOrCode = (String) params.get ("nameOrCode"); 
sql += " and (u.name like '%" + nameOrCode + "%' or u.outside code 


like '%" + nameOrCode + "%' )"; 
. 
if (params.get ("unitTypeId") != null) { 
String unitTypeId = (String) Params .get("unitTypeId") 
sql += " and unitTypeId='" + unitTypeId + "'"; 


if (params.get ("unitGradeId") != null) { 
String unitGradeId = (String) params.get ("unitGradeId"); 
sql += " and unitGradeId='" + unitGradeId + "'"; 


if (params.get ("areaId") != null) { 
String areaId = (String) params.get ("areaId"); 
sql += " and u.areald='" + areaId + ™'"™; 

’ 


sql += " order by outside code desc"; 
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return sql; 
} 
在 实现 类 UnitInfoServiceImpl 中 ， 实 现 queryUnitInfoList_Table 方法 ， 代 码 如 下 : 
Q@Override 
public List<ProUnitinfo> queryUnitInfoList Table (Map<string, Object> params, 
Pager pager) { 

int recordCount = unitInfoDao.count (params) .size(); 

pager.setRowCount (recordCount); 

if (recordCount > 0) { 

params.put ("pager", pager); 


} 
return unitInfoDao.selectByPage (params); 


} 

queryUnitInfoList_Table 方法 有 两 个 参数 ,一 个 是 Pager 类 型 的 参数 pager, 用 于 封装 从 
前 端 页 面 传递 来 的 页 码 和 每 页 记录 数 ， 另 一 个 是 Map<String，Object> 类 型 的 参数 params， 
用 于 封装 从 前 端 页 面 传递 来 的 查询 条 件 。 在 queryUnitInfoList_Table 方法 中 ， 首 先 调用 接口 
UnitInfoDao 中 的 count 方法 , 获取 满足 条 件 的 单位 总 数 , 将 其 赋值 给 pager 对 象 的 rowCount 
属性 ， 并 将 pager 对 象 放 入 params 中 ; 然后 调用 接口 UnitInfoDao 中 的 selectByPage 方法 ， 
分 页 获取 满足 条 件 的 单位 列表 。 

在 UnitInfoDao 接口 中 ，selectByPage 方法 的 代码 如 下 : 


// 分 页 显示 单位 列表 


@SelectProvider (type = UnitInfoDynasqlProvider.class, method = 
"selectWithParam" ) 
List<ProUnitinfo> selectByPage (Map<String, Object> params) 7 


在 上 述 selectByPage 方法 中 , 通过 调用 UnitInfoDynaSqlProvider 类 中 的 selectWithParam 
方法 返回 需要 执行 的 SELECT 语句 。 在 UnitInfoDynaSqlProvider 类 中 ，selectWithParam 方 
法 的 代码 如 下 : 


public String selectWithParam(Map<String, Object> params) { 
String sql = "select u.*,pt.name as unitType,pg.name as unitGrade from 
pro unitinfo u " + "left join pro paraminfo pt on u.unitTypelId = pt.id " 
+ "left join Pro_paraminfo pg on u.unitGradeId = pg.id " + "where 
u.delstate='1' and 1=1"; 


if (params.get ("nameOrCode") != null) { 
String nameOrCode = (String) params.get ("nameOrCode"); 
sql += " and (u.name like '%" + nameOrCode + "%' or u.outside code 


like '%" + nameOrCode + "%"' )"; 
} 
if (params.get ("unitTypeId") != null 
&& !params .get ("unitTypelId") .equals("")) { 
String unitTypeId = (String) params.get ("unitTypeId"); 
sql += " and unitTypeId='" + unitTypeId + "'"; 
i 
if (params.get ("unitGradeId") != null) { 
String unitGradeId = (String) params.get ("unitGradeId"); 
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sql += " and unitGradeId='" + unitGradeId + "'"; 


3 

if (params.get ("areaId") != null) { 
String areald = (String) params.get ("arealId"); 
sql += " and u.areald='" + areald + ™'"; 


» 


sql += " order by outside code desc"; 
if (params.get ("pager") != null) { 
sql += " limit #{pager.firstLimitParam} , #{pager.perPageRows} "7 


} 
return sql; 
} 


至 此 ， 单 位 列表 显示 功能 就 讲解 完了 。 接 下 来 ， 介 绍 单位 添加 功能 的 实现 过 程 。 
2. 添加 单位 
在 单位 设置 页 面 中 ， 单 击 新 增 按钮 ， 打 开 单 位 添加 对 话 ， 如 图 20-17 所 示 。 


单位 添加 


单位 名 称 


单位 类 别 请 选择 TY 


添加 


图 20-17 单位 添加 对 话 框 
在 单位 添加 对 话 框 中 ， 单 位 类 别 是 一 个 下 拉 列 表 控 件 ， 其 布局 如 下 : 


<select class="form-control unitTypeId"” name="unitTypeId" id= 
"unitTypeId"></select> 


在 $(function() { 为 代码 段 中 ， 调 用 了 一 个 JavaScript 函数 loadUnitType， 为 单位 类 别 下 
拉 列 表 提 供 数据 源 并 生成 下 拉 列 表 选 项 ， 函 数 调用 如 下 : 


loadUnitType ("/ccms/unitinfo/getUnitTypeList","unitTypeId"); 


loadUnitType 函数 定义 在 CommonValue.jjs 中 , 该 文件 位 于 src/main/webapp/commons/jslib 
目录 中 ， 其 代码 如 下 : 


function loadUnitType (url, idstr) { 


$.ajax({ 
rl s rly 
dataType : 'json', 
data : {}, 
tyDe 2 "post"y 
success : function(data) { 
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var options = "<option value=''> 请 选择 </option>"; 
$.each(data.unitTypeList, function(key, val) { 
options += '<option value=' + val.id + '>' + val.name 
+ '</option>'; 

Ds; 
$('#' + idStr) .empty(); 
$('#' + idStr) .append (options); 

}, 

error : function() { 

} 

3 
} 


在 函数 loadUnitType 中 ， 通 过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ， 请 求 的 地 址 
为 /ccms/unitinfo/getUnitTypeList， 这 个 url 请 求 将 映射 到 控制 器 类 UnitmfoController 中 的 
getUnitTypeList 方法 ， 方 法 的 返回 结果 作为 单位 类 别 下 拉 列 表 的 数据 源 ，success 参数 的 类 
型 为 Function， 表 示 请 求 成 功 后 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 参数 data， 
然后 根据 接收 的 数据 生成 单位 类 别 下 拉 列 表 的 选项 。 

在 控制 器 类 UnitInfoController 中 ，getUnitTypeList 方法 的 代码 如 下 : 


// 获取 单位 类 别 列表 
@RequestMapping (value = "/getUnitTypeList", method = { RequestMethod.GET, 
RequestMethod.POST }) 
Q@ResponseBody 
public Map<String, Object> getUnitTypeList (HttpServletRequest reqg, 
HttpServletResponse resp) throws IOException { 

// 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 

String areaId = 
req.getSession() .getAttribute ("AREANUMBER") .上 toString() 7 

// 根据 区 域 编 号 获取 所 有 单位 类 别 

List<ProParamInfo> list = unitInfoService.getUnitTypeList (areaId) 

int count = 0; 

if (list != null && list.size() > 0) { 

count = list.size(); 


} 
// 创建 对 象 result， 保 存 返 回 结果 
Map<String, Object> result = new HashMap<String, Object>(2); 
result.put ("count", count); 
result.put ("unitTypeList", list); 
return result; 
} 


在 上 述 getUnitTypeList 方法 中 ， 首 先 从 session 中 获取 当前 区 域 管 理 员 的 区 域 编号 ; 然 
后 调用 业务 接口 UnitInfoService 中 的 getUnitTypeList 方法 ， 根 据 区 域 编号 获取 所 有 单位 类 
别 , 再 创建 Map<String, Objec 人 > 类 型 的 对 象 result, 用 于 保存 单位 类 别 总 数 和 单位 类 别 列表 ; 
最 后 将 结果 result 转 为 JSON 格式 ， 发 送 到 前 端 页 面 。 

在 接口 UnitInfoService 中 ， 声 明 getUnitTypeList 方法 ， 代 码 如 下 : 


// 根据 当前 院 校 管理 员 的 区 域 编号 获取 所 有 单位 类 别 
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List<ProParamInfo> getUnitTypeList (String areaId); 


在 接口 UnitInfoService 的 实现 类 UnitInfoServiceImpl 中 , 实现 getUnitTypeList 方法 , 代 
码 如 下 : 


Q@Override 
public List<ProParamInfo> getUnitTypeList(String areaId) { 


return unitInfoDao.getUnitTypeList (areaId) 7 
} 


在 实现 类 UnitInfoServiceImpl 的 getUnitTypeList 方法 中 ， 直 接 调用 了 UnitInfoDao 接口 
中 的 getUnitTypeList 方法 。 

在 UnitInfoDao 接口 中 ，getUnitTypeList 方法 的 代码 如 下 : 

// 根据 当前 院 校 管理 员 的 区 域 编号 获取 所 有 单位 类 别 

@Select ("select * from pro_paraminfo where type='02' and areaId = #{areaId} 


order by sortNum asc") 
List<ProParamInfo> getUnitTypeList (@Param("arealId") String areaId) 7 


在 UnitInfoDao 接口 的 getUnitTypeList 方法 中 , 根据 当前 院 校 管理 员 的 区 域 编号 从 参数 
信息 表 pro_paraminfo 中 查询 type=02， 即 单位 类 型 记录 。 
对 于 区 域 管理 员 yzd 来 说 ， 单 位 类 别 下 拉 列 表 中 的 选项 如 图 20-18 所 示 。 


单位 添加 
单位 名 称 | 
单位 类 别 请 选择 a 
编码 社团 
宿舍 樟 
学 生 
教师 
院 系 


图 20-18 单位 类 别 下 拉 列 表 


在 单位 添加 对 话 框 中 ， 填 写 单位 名 称 和 编码 ， 并 选择 单位 类 别 ， 再 单 击 添加 按钮 ， 将 
执行 JavaScript 中 的 addUnit 函数 ， 其 代码 如 下 : 


function addUnit(){ 
var name = $("#name") .val (); 
var outside = $("#outside code") .val(); 
var unitTypeId = $("#unitTypeId") .val (); 
var unitGradeId = $("#unitGradeId") .val (); 
$.ajax({ 
url:'/ccms/unitinfo/addUnit', 
type: "post'y 
五 Sync trae"s 
cache:false, 
data: {name:name,outside code:outside, unitTypeIld:unitTypelId, 
unitGradeId:unitGradeId}, 
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dataType:"'json', 
success: function(data){ 
if(data.exist=="'exitOutCode'){ 
Swal({ 
title: "系统 提示 "， 
text: "已 存在 该 编码 "， 
type: "warning" 
}:function(){ 
$ ("#0outside code") .val(''); 
Ds; 
J}else if(data.success){ 
swall({ 
title: "系统 提示 "， 
text: "添加 成 功 "， 
type: "success" 
]) 7 
$("#name") .val (''); 
$("#outside code") .val(''); 
$("#unitTypeId") .val (''); 
$("#unitGradeId") .val (''); 
$("#addwin") .modal ('hide'); 
$('#table') .bootstrapTable ("refresh"); 
J}Jelsel{ 
swall({ 
title: "系统 提示 "， 
text: "添加 失败 "， 
type: "warning" 
1D); 


} 
error: function (aa, ee, II) { 
swall({ 
title: "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type: "warning" 
},function(){ 
DD); 


在 函数 addUnit 中 , 首先 获取 表单 中 填写 的 内 容 , 然后 通过 jQuery AJAX 方式 向 后 台 服 
务 器 发 送 请 求 ， 请 求 的 地 址 为 /cems/unitinfo/addUnit， 这 个 url 请求 将 映射 到 控制 器 类 
UnitInfoController 中 的 addUnit 方法 ; data 用 于 指定 发 送 到 服务 器 的 数据 ; success 用 于 指定 
请 求 成 功 后 调用 的 回调 函数 ， 服 务 器 方法 的 返回 结果 将 保存 在 该 函数 的 参数 data 中 。 

在 控制 器 类 UnitInfoController 中 ，addUnit 方法 的 代码 如 下 : 

// 添加 


Q@RequestMapping (Value 
RequestMethod.POST }) 


"/addUnit", method = { RequestMethod.GET, 
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public String addUnit (ProUnitinfo info, HttpServletRequest reqg, 
HttpServletResponse res) { 
// 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 
String areaId = 
req.getSession() .getAttribute ("AREANUMBER") .toSstring(); 
// 将 区 域 编号 封装 在 ProUnitinfo 类 型 对 象 info 中 
info.setRAreaId (areaId) 7 
JsonObject jObject = new Jsonobject () > 
// 查询 是 否 存 在 外 部 编码 
String exist = unitInfoService.isExistOutCode (info); 
if (exist.equals("no")) { 
// 添加 单位 
int result = unitInfoService.addUnit (info); 
joObject.addProperty("success", result); 
} else { 
JobJject .addProperty ("exist", exist); 


} 

try { 
ServletOutputSstream jos = res.getOoutputstream(); 
jos.write(jObject.tostring() .getBytes ("utf-8")); 
jos.flush(); 
jos.close(); 

} catch (IOException e) { 
e.printstackTrace () 7 

} 

return null; 


} 


addUnit 方法 有 一 个 ProUnitinfo 类 型 的 参数 info, 用 于 封装 从 前 端 页 面 传递 来 的 单位 信 
息 。 在 addUnit 方 法 中 ， 首 先 调 用 业务 接口 UnitInfoService 中 的 isExistOutCode 方法 ， 根 据 
当前 区 域 管理 员 的 区 域 编号 查询 是 否 存 在 外 部 编码 。 如 果 不 存在 该 外 部 编码 ， 则 调用 接口 
UnitInfoService 中 的 addUnit 方法 ， 添 加 这 个 单位 信息 。 

在 接口 UnitInfoService 中 ，isExistOutCode 方法 的 声明 如 下 : 

// 查询 是 否 存在 外 部 编码 


public String isExistOutCode (ProUnitinfo info); 


在 实现 类 UnitInfoServiceImpl 中 ， 实 现 isExistOutCode 方法 ， 代 码 如 下 : 


@Override 
public String isExistOutCode (ProUnitinfo info) { 
String result; 
if (info.getId() == null) { 
info.setId("" 


String outside code = info.getOutside code(); 

String id info.getId(); 

String areaId = info.getAreald(); 

int existOutCode = unitInfoDao.unitValidOoutCode (outside code, id, 
areaId) 7 

if (existOutCode > 0) { 
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result = "exitOutCode"; 
} else { 
result = "no"; 


3 


return result; 

} 

在 isExistOutCode 方法 中 ， 调 用 了 接口 UnitInfoDao 中 的 unitValidOutCode 方法 ， 以 验 
证 单位 外 部 编码 是 否 已 经 存在 。 如 果 已 经 存在 ， 则 返回 字符 串 exitOutCode， 和 否则 返回 字符 
串 no。 在 UnitInfoDao 接口 中 ，unitValidOutCode 方法 的 代码 如 下 : 

// 验证 单位 外 部 编码 

select ("select count (*) from pro unitinfo where outside code = 

#{outside code} and id <> #{id} and areaId = #{areaId} and delSstate=1") 


public int unitValidOoutCode (@Param("outside code") String outside code, 
Q@Param("id") String id,@Param("areaId") String areaId) 7 


在 接口 UnitInfoService 中 ，addUnit 方法 的 声明 如 下 : 


// 添加 
Public int addUnit (ProUnitinfo info); 


在 实现 类 UnitInfoServiceImpl 中 ， 实 现 addUnit 方法 ， 代 码 如 下 : 


Q@Override 

public int addUnit (ProUnitinfo info) { 
String uid = UUIDGenerator.getUUID(); 
info.setId (uid); 
return unitInfoDao.addUnit (info); 


} 

在 上 述 addUnit 方法 中 ， 首 先 调用 UUIDGenerator 类 的 getUUID 方法 ， 生 成 一 个 新 的 
单位 编号 , 并 保存 在 info 对 象 中 ; 然后 调用 接口 UnitInfoDao 中 的 addUnit 方法 , 将 对 象 info 
中 的 数据 插入 到 数据 表 pro_unitinfo 中 。 在 接口 UnitmfoDao 中 ，addUnit 方法 的 代码 如 下 : 

// 添加 

@Insert ("insert into pro unitinfo(id,name,unitTypeId,unitGradeId, 

outside code,delSstate,arealId) "+ "values (#{id},#{name}, 

#{unitTypeId},#{unitGradeId},#{outside code},1,#{areaId})") 

public int addUnit (ProUnitinfo info); 

以 添加 一 个 类 型 为 学 生 的 单位 为 例 ， 在 添加 单位 对 话 框 中 ， 输 入 单位 名 称 张 山 山 ， 编 
号 180101001， 选 中 单位 类 别 为 学 生 ， 单 击 添加 按钮 。 此 时 ， 数 据 表 pro_unitinfo 中 会 增加 
一 条 学 生 类 型 的 单位 记录 。 

至 此 ， 单 位 添加 功能 就 讲解 完了 。 接 下 来 ， 介 绍 根据 单位 名 称 和 单位 类 别 搜索 单位 功 
能 的 实现 过 程 。 


3. 根据 单位 名 称 和 单位 类 别 搜索 


在 单位 设置 页 unitmfo.jsp 中 ， 输 入 单位 名 称 或 选择 单位 类 别 ， 单 击 搜索 按钮 ， 将 执行 
JavaScript 函数 search， 其 代码 如 下 : 
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// 查 询 


function search(){ 


var name = $('# search') .val(); 
$('#table') .bootstrapTable('refresh', { 
query: { 


nameOrCode:$ ("#unitInfoName") .val (), 
unitTypeId:$ ("#unitTypeSel option:selected") .val(), 
unitGradeId:$ ("#unitGradeSel option:selected") .val() 
} 
Ds; 
} 


在 函数 search 中 ， 通 过 调用 Bootstrap 的 table 控件 的 refresh 方法 ， 重 新 发 送 
/ccms/unitinfo/queryUnitInfoList_table 这 个 url 请 求 ， 即 再 次 执行 控制 器 类 UnitInfoController 
中 的 queryUnitInfoList_Table 方法 ， 并 将 查询 参数 传递 过 去 。 在 queryUnitInfoList_Table 方 
法 中 ， 根 据 条 件 重新 获取 单位 列表 ， 并 显示 在 Bootstrap 的 table 控件 中 。 

单位 修改 和 删除 功能 的 实现 思路 与 院 校 管理 中 的 院 校 修改 和 删除 类 似 ， 由 于 篇 幅 所 限 ， 
此 处 不 再 描述 ， 读 者 可 以 参照 源 代码 加 以 理解 。 


20.7.2 角色 管理 
在 如 图 20-5 所 示 的 院 校 管理 员 界 面 中 ， 单 击 用 户 权限 管理 栏目 下 的 角色 管理 菜单 ， 打 


开 角 色 管 理 页 roleManager.jsp， 该 页 面 位 于 src/main/webapp/views/role 目录 下 ， 如 图 20-19 


[ee ee | 
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图 20-19 角色 管理 页 


在 角色 管理 页 roleManagerjsp 中 ， 需 要 实现 角色 列表 的 显示 、 新 增 、 编 辑 、 删 除 和 权 
限 设 置 功能 。 本 小 节 主 要 就 角色 列表 显示 和 权限 设置 功能 作 详细 讲解 ， 由 于 篇 幅 所 限 ， 其 
他 功能 不 作 介 绍 ， 读 者 可 以 参照 源 代码 加 以 理解 。 
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1. 角色 列表 显示 
为 了 显示 角色 列表 ， 定 义 了 一 个 id 为 table 的 <table> 标 签 ， 如 下 所 示 : 
<!-- 角色 列表 显示 --> 


<div class="ibox-content"> 
<table id="table"> 
</table> 

</div> 


然后 通过 JavaScript 对 这 个 <table> 标 签 进行 初始 化 ， 代 码 如 下 : 


$ (function() { 
vform('upform', upRole); 
vform('addform', addRole); 
var S$table = $('#table'); 
$table.bootstrapTable ({ 
url : "/ccms/role/getAllRole", 
method : 'post', 
contentType : "application/x-www-form-urlencoded", 
dataType : "json", 
pagination : true，// 分 页 
pageSize : 3， 
pageNumber : 1, 
singleSelect : false, 
queryParamsType : "undefined", 
queryParams : function queryParams (params) { // 设 置 查 询 参 数 
var param = { 
page : params.pageNumber, 
rows : params.pageSize, 
}; 
return param; 
}, 
cache : false, 
sidePagination : "server"，// 服 务 端 处 理 分 页 
columns : [ 
{ 
title : ' 角 色 '， 
field : 'roleName', 
width : '50%°', 


valign : 'middle' 
}, 
{ 
title : "操作 
field 3 "4d"s 
formatter : function(value, row, index) { 


Var e = '<a href="#" class="btn btn-gmtx-definel™" 
onclick="eqdit(\' + row.roleCode + NAN 
+ row.roleName + '\') "> 编辑 </a> '; 
var d = '<a href="#" class="btn btn-gmtx-definel™ 
onclick="delRole(\'' + row.roleCode + '\') "> 删除 </a> '; 
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var 工 = '<a href="#" class="btn btn-gmtx-definel™ 


onclick="accessShow(\'' + row.roleCode + "'\')"> 权 限 设置 </a> '; 
return e +d+f; 


} 
nl 
划 
]) 7 


通过 调用 bootstrapTable 方法 ， 将 <table> 标 签 创建 为 Bootstrap 的 table 控件 ， 并 通过 设 
置 一 系列 属性 来 初始 化 这 个 table 控件 。url 属性 用 于 设置 table 控件 的 数据 源 ， 这 里 为 
/ccms/role/getAllIRole， 这 个 url 请 求 将 映射 到 后 台 控 制 器 类 RoleController 中 的 getAllRole 
方法 ; queryParams 属性 用 于 设置 查询 参数 ,Bootstrap 的 table 控件 会 将 page 和 rows 两 个 参 
数 传递 到 控制 器 类 RoleController 中 的 getAllRole 方法 ; columns 属性 用 于 设置 列 。 

在 控制 器 类 RoleController 中 ，getAllRole 方法 的 代码 如 下 : 


// 查询 所 有 role 
@RequestMapping (value = "/getAllRole", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public Map<String, Object> getAllRole(Integer page, Integer rows, 
HttpServletRequest req, HttpServletResponse rep) { 
// 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 
String areaId = 
req.getSession() .getAttribute ("AREANUMBER") .tostring(); 
// 初始 化 分 页 类 对 象 
Pager pager = new Pager(); 
pager.setCurPage (page); 
pager.setPerPageRows (rows); 
// 创建 对 象 params， 用 于 封装 查询 条 件 
Map<String, Object> params = new HashMap<Sstring, Object>(); 
params.put ("areald", areald); 
// 获取 满足 条 件 的 角色 总 数 
int totalCount = roleService.count (params); 
// 根据 查询 条 件 获取 当前 页 的 角色 列表 
List<SysRole> roles = roleService.getAllRole (areald, pager); 
// 创建 对 象 result， 用 于 保存 返回 结果 
Map<String, Object> result = new HashMap<String, Object>(2) 7 
result.put ("total", totalCount); 
result.put ("rows", roles); 
return result; 


在 getAllRole 方法 中 ， 首 先 从 session 中 获取 当前 区 域 管理 员 的 区 域 编 号 areald， 然 后 
初始 化 一 个 分 页 类 对 象 pager， 给 其 设置 curPage 和 perPageRows 两 个 属性 值 ， 接 着 创建 
Map<String，Object> 类 型 的 对 象 params， 将 区 域 管理 员 的 区 域 编号 放 入 params 中 ; 依次 调 
用 业务 接口 RoleService 中 的 count 方法 获取 满足 条 件 的 角色 总 数 ， 调 用 getAllRole 方法 获 
取 满足 条 件 的 当前 页 的 角色 列表 ; 再 创建 Map<String, Object> 类 型 的 对 象 result， 保 存 查询 
结果 数据 ; 最 后 将 返回 结果 转 为 ISON 格式 ， 以 字符 串 的 形式 发 送 到 前 端 页 面 
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roleManager.jsp， 为 Bootstrap 的 table 控件 提供 数据 源 。 
在 业务 接口 RoleService 中 ， 声 明 两 个 方法 ， 代 码 如 下 : 


// 获取 满足 条 件 的 角色 总 数 


Integer count (Map<String, Object> params); 


// 分 页 查询 所 有 角色 


Public List<SysRole> getAllRole (String areald, Pager pager); 


在 接口 RoleService 的 实现 类 RoleServiceImpl 中 ， 实 现 count 方 法， 代码 如 下 : 


Package com.ccms.service.impl; 


import com.ccms.service.RoleService; 
import com.ccms.tools.Tree; 
import com.ccms.tools.UUIDGenerator; 
Q@Service ("roleService") 
@Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class RoleServiceImpl implements RoleService { 
@Autowired 
RoleDao roleDAO; 
@override 
public Integer count (Map<String, Object> params) { 
return roleDAO.count (params); 


在 实现 类 RoleServiceImpl 的 count 方法 中 , 直接 调用 了 接口 RoleDAO 中 的 count 方法 。 
在 RoleDAO 接口 中 ，count 方 法 的 代码 如 下 : 
// 根据 条 件 查 询 角 色 总 数 


@SelectProvider (type = RoleDynaSqlProvider.class, method = "count") 
int count (Map<String, Object> params); 


在 上 述 count 方 法 中 , 通过 RoleDynaSqlProvider 类 的 count 方法 获取 要 执行 的 SELECT 
语句 。 在 RoleDynaSqlProvider 类 中 ，count 方法 的 代码 如 下 : 


// 动态 查询 角色 总 记录 数 

public String count (Map<String，Object> params) { 
String areald = (String) params.get ("areald"); 
String sql = "select count (*) from sys_role where areaId='" + areaId + "'"; 
return sql; 

} 


在 接口 RoleService 的 实现 类 中 ， 实 现 getAllRole 方法 ， 代 码 如 下 : 


@Override 

public List<SysRole> getAllRole (String areald, Pager pager) { 
Map<Sstring, Object> params = new HashMap<Sstring, Object>(); 
params.put ("areaId", arealId); 
int recordCount = roleDAO.count (params); 


pager.setRowCount (recordCount); 


Spring + Spring MVC + MyBatis 
框架 技术 精 讲 与 整合 案例 
if (recordCount > 0) { 

params.put ("pager", pager); 


. 


return roleDAO.selectByPage (params); 


} 


getAllRole 方法 有 两 个 参数 ， 一 个 是 Pager 类 型 的 参数 pager， 用 于 封装 从 前 端 页 面 传 
递 来 的 页 码 和 每 页 记录 数 : 另 一 个 是 String 类 型 的 参数 areald， 用 于 封装 当前 区 域 管理 员 的 
区 域 编号 。 在 getAllRole 方法 中 ， 首 先 调 用 接口 RoleDAO 中 的 count 方法 ， 获 取 满 足 条 件 
的 角色 总 数 ， 将 其 赋值 给 pager 对 象 的 rowCount 属性 ， 并 将 pager 对 象 放 入 params 中 ; 然 
后 调用 接口 RoleDAO 中 的 selectByPage 方法 ， 分 页 获取 满足 条 件 的 角色 列表 。 

在 RoleDAO 接口 中 ，selectByPage 方法 的 代码 如 下 : 

// 分 页 获取 所 有 角色 

@SelectProvider (type = RoleDynaSqlProvider.class，method = 

"selectWithParam") 

List<SysRole> selectByPage (Map<String, Object> params); 

在 selectByPage 方法 中 ,通过 调用 RoleDynaSqlProvider 类 中 的 selectWithParam 方法 返 
回 需 要 执行 的 SELECT 语句 。 在 RoleDynaSqlProvider 类 中 ，selectWithParam 方法 的 代码 
如 下 : 

// 分 页 动态 查询 角色 


public String selectWithParam(Map<String, Object> params) { 
String areald = (String) params.get ("areald"); 


String sql = "select roleCode,roleName from sys_role where areald='" + 
areaTd + “emy 
if (params.get ("pager") != null) { 


sql += " limit #{pager.firstLimitParam} , #{pager.perPageRows} "; 
} 
return sql; 


} 
至 此 ， 角 色 列 表 显 示 功 能 讲解 完了 。 接 下 来 ， 介 绍 权 限 设 置 功能 的 实现 过 程 。 
2. 权限 设置 


权限 设置 包括 权限 绑 定 和 权限 修改 两 个 部 分 。 
1) 权限 绑 定 
在 角色 管理 页 中 的 用 于 显示 角色 列表 的 Bootstrap 的 table 控件 上 ， 单 击 某 个 角色 (如 学 
生 ) 的 权限 设置 按钮 ， 打 开 绑 定 菜单 对 话 框 ， 如 图 20-20 所 示 。 

在 绑 定 菜单 对 话 框 中 ， 以 树 的 形式 显示 该 角色 所 拥有 的 功能 ， 其 布局 如 下 : 
<!-- 绑 定 菜单 窗口 --> 
<div class="modal fade" id="accesswin"> 

<div class="modal-dialog" style="width: 400px; height: 250px"> 

<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal™ 
aria-hidden="true">&times;</button> 
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<h4 class="modal-title"> 绑 定 菜单 </h4> 
</div> 
<div class="modal-body"> 
<div class="row"> 
<div class="center-gmtx"> 
<ul id="treeModule" class="ztree" style="height: 
280px"></ul> 
</div> 
</div> 
</div> 
<div class="modal-footer"> 
<button type="button" class="btn btn-gmtx-definel 


center-block" onclick="saveAccess() "> 保存 </button> 
</div> 
</div> 
</div> 
</div> 
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在 这 个 布局 中 ， 定 义 了 一 个 zTree 插件 ， 只 要 为 其 提供 数据 源 ， 就 可 以 显示 功能 权限 树 
了 。 单 击 权 限 设置 按钮 时 ， 将 执行 JavaScript 函数 accessShow， 并 将 当前 行 的 角色 编号 作为 
人 参数， 函数 accessShow 的 代码 如 下 : 

/** 菜 单 显示 */ 

Var roleCode access; 


function accessShow(roleCode) { 
roleCode access = roleCode; 


// 显示 绑 定 菜单 窗口 


$('#accesswin') .modal ('show'); 


// 树 

$.ajax({ 
url : '/ccms/role/getModule', 
type 三 "post's 


Aanec. s "true's 


Spring + Spring MVC + MyBatis 


框架 技术 精 讲 与 整合 案例 


cache : false, 


data : { 
roleCode : roleCode access 
}, 
dataType : 'json', 
success : function(data) { 


$.fn.zTree.init ($("#treeModule"), setting, data); 
$("#py") .bind("change", setCheck); 
$("#sy") .bind("change", setCheck); 
$("#pn") .bind("change", setCheck); 
$("#sn") .bind("change", setCheck); 


Ds; 
: 
var setting = { 
check : { 
enable : true, 
autoCheckTrigger : true, 
ChkStyle : "checkbox", 
chkboxType : { 
MY pen 
Wn 全 各 的 司 


x 
data.s { 
simpleData : { 
enable : true 


}; 
在 函数 accessShow 中 ， 首 先 显示 绑 定 菜单 窗口 ， 然 后 通过 jQuery AJAX 方式 向 后 台 服 


务 器 发 送 请 求 ， 请 求 的 地 址 为 /ccems/role/getModule， 这 个 url 请 求 将 映射 到 控制 器 类 
RoleController 中 的 getModuleListCheckedByRoleId 方法 ,方法 的 返回 结果 作为 zTree 插件 ( 功 
能 权限 树 ) 的 数据 源 ，getModuleListCheckedByRoleld 方法 的 代码 如 下 : 


// 获取 所 有 module 
@RequestMapping (value = "/getModule", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public List<Tree> getModuleListCheckedByRoleId (String roleCode, 
HttpServletRequest req, HttpServletResponse res) { 

// 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 

String aredId = 
req.getSession() .getAttribute ("AREANUMBER") .toSstring(); 

List<Tree> tree = roleService.getModuleListCheckedByRoleId (roleCode, 
aredId); 

return tree; 


} 
在 getModuleListCheckedByRoleld 方法 中 ， 首 先 从 session 中 获取 当前 区 域 管理 员 的 区 
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域 编号 ， 然 后 调用 业务 接口 RoleService 中 的 getModuleListCheckedByRoleld 方法 。 在 
RoleService 接口 中 ，getModuleListCheckedByRoleld 方法 的 声明 如 下 : 


// 根据 roleid 获取 
public List<Tree> getModuleListCheckedByRoleId(String roleCode, String 
areaId) 7 


在 实现 类 RoleServiceImpl 中 ， 实 现 getModuleListCheckedByRoleld 方法 ， 代 码 如 下 : 
@Override 
public List<Tree> getModuleListCheckedByRoleId (String roleCode, String 
areaId) { 

// 获取 所 有 功能 菜单 

List<Tree> allModuleList = roleDAO.getAllModule (); 

// 根据 角色 编号 和 当前 区 域 管 理 员 区 域 编号 获取 功能 菜单 

List<Tree> roleModuleList = roleDAO.getModuleByRoleId (roleCode, 
areaId) 7 

if (allModuleList != null & roleModuleList != null) { 

for (Tree tree : allModuleList) { 
if (roleModuleList.contains(tree)) { 
tree.setChecked (true); 


} 


tree.setOpen (true); 
} 
} 


return allModuleList; 


} 


在 getModuleListCheckedByRoleId 方法 中 , 首先 获取 所 有 功能 菜单 ， 然 后 根据 角色 编号 
和 当前 区 域 管理 员 区 域 编号 获取 功能 菜单 ， 再 根据 该 角色 所 拥有 的 权限 ， 将 功能 权限 树 上 
的 相应 结 点 选中 。 这 样 ， 学 生 这 个 角色 的 权限 绑 定 就 完成 了 。 

2) 权限 修改 

在 如 图 20-20 所 示 的 绑 定 菜单 对 话 框 中 , 可 以 重新 设置 各 个 结 点 的 选中 状态 , 单 击 保存 
按钮 后 ， 将 执行 JavaScript 函数 saveAccess， 其 代码 如 下 : 


// 保 存 菜 单 
function saveAccess() { 
var mids = ''; 


Var treeobj = $.fn.zTree.getZzTreeObj ("treeModule"); 
Var nodes = treeObj.getCheckedNodes (true); 
for (i = 0; i < nodes.length; i++) { 
mids = mids + nodes[i].id + ','; 
} 


$.ajax({ 
url : '/ccms/role/bindModule', 
type : "post'; 
asyne -3 "true”s 
cache : false, 
data : { 
roleCode : roleCode access, 


mids : mids 
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dataType : 'json', 
success : function(data) { 


if (data.success) { 
swal ("系统 提示 ! "， " 绑 定 成 功 。"， "success") 7 
} else { 
Swal({ 
title : "系统 提示 "， 
text : " 绑 定 失败 "， 
type : "warning" 


]) 7 


bs 
error : function(aa, ee, rr) { 
swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
]) 7 


1); 
} 


在 函数 saveAccess 中 ， 首 先 遍 历 权 限 树 上 选中 的 结 点 ， 将 这 些 结 点 所 代表 的 功能 菜单 
编号 以 逗号 分 隔 , 保存 在 变量 mids 中 。 然后 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ， 
请 求 的 地 址 为 /cems/role/bindModule， 这 个 url 请 求 将 映射 到 控制 器 类 RoleController 中 的 
bindModuleByRoleld 方法 ;data 用 于 指定 发 送 到 服务 器 的 数据 ，success 用 于 指定 请 求 成 功 
后 调用 的 回调 函数 ， 控 制 器 类 方法 的 返回 结果 将 传递 给 该 函数 的 参数 data。 

在 控制 器 类 RoleController 中 ，bindModuleByRoleld 方法 的 代码 如 下 : 


// 绑 定 module 
@RequestMapping (value = "/bindModule", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public String bindModuleBYRoleId(String roleCode, String mids, 
HttpServletRequest req, HttpServletResponse res) { 
// 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 
string aredId = 
req.getSession() .getAttribute ("AREANUMBER") .tostring(); 
int result = roleService.bindModuleByRoleId(roleCode, mids, aredId); 
jobject = new JsonObject (); 
joObject.addProperty("success", result); 
try { 
ServletOutputStream jos = res.getOutputstream(); 
jos.write(jObject.tostring() .getBytes ("utf-8")); 
jos.flush(); 
jos.close(); 
} catch (IOException e) { 
e.printstackTrace (); 
return null; 


|: 
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在 bindModuleByRoleId 方法 中 ,首先 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 ， 然 
后 调用 业务 接口 RoleService 中 的 bindModuleByRoleld 方法 。 在 RoleService 接口 中 ， 
bindModuleByRoleId 方法 的 声明 如 下 : 


public int bindModuleByRoleId(String roleCode,String mids,String areaId) 7 


在 实现 类 RoleServiceImpl 中 ， 实 现 bindModuleByRoleId 方法 ， 代 码 如 下 : 


@Override 
Public int bindModuleByRoleId (String roleCode, String mids, String areaId) 
{ 
if (mids.length() > 0) { 
mids = mids.substring(0, mids.length() - 1); 
} 
String[] midstrings = mids.split(","); 
int resulta = 0, resultd = 0; 
// 不 存在 时 返回 0, 不 能 作为 判断 失败 的 标准 
resultd = roleDAO.deleteModuleByRoleCode (roleCode, areaId) 
// 当 给 某 个 角色 删除 全 部 权限 时 
if ((resultd > 0) && (mids == null || mids.isEmpty())) { 
return 1; 
} 
for (int i = 0; i < midstrings.length; i++) { 
// 当 更 改 为 没有 权限 时 mids 为 空 ， 
// resulta 也 不 能 作为 判断 操作 成 功 与 失败 的 唯一 标准 
resulta = roleDAO.insertModuleBuRoleCode (UUIDGenerator .getUUID ()， 
roleCode, midstrings[i], areald); 
} 
return resulta; 


} 


bindModuleByRoleld 方法 有 三 个 参数 ，roleCode 表示 角色 编号 ; mids 封装 了 从 前 端 页 
面 传递 来 的 以 逗号 分 隔 的 功能 菜单 编号 ; areald 表示 当前 区 域 管理 员 的 区 域 编号 。 在 
bindModuleByRoleld 方法 中 ， 首 先 调 用 接口 RoleDAO 中 的 deleteModuleByRoleCode 方法 ， 
删除 该 角色 编号 下 的 所 有 功能 菜单 ;然后 调用 接口 RoleDAO 中 的 insertModuleBuRoleCode 
方法 ， 根 据 角 色 编 号 重新 添加 功能 菜单 。 

在 RoleDAO 接口 中 ，deleteModuleByRoleCode 方法 的 代码 如 下 : 

// 删除 所 有 roleid 下 的 module 

@Delete ("delete from sys_role module where roleCode = #{roleCode} and 

areaId=#{areaId}") 


public int deleteModuleByRoleCode (8@Param("roleCode") String roleCode, 
@Param("areaId") String areaId) 7 


在 RoleDAO 接口 中 ，insertModuleBuRoleCode 方法 的 代码 如 下 : 
// 根据 roleid 添 加 module 


@Insert ("insert into sys_role module(rmId,roleCode,moduleCode,areald) 
values (#{rmId},#{roleCode},#{moduleCode},#{areaId})") 
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public int insertModuleBuRoleCode (eParam("rmId") String rmId, 
@Param("roleCode") String roleCode, @Param("moduleCode") String 
moduleCode, Param("areaId") String areaId) 7 


至 此 ， 权 限 设置 功能 就 讲解 完了 。 


20.7.3 用户 管理 


在 图 20-5 所 示 的 院 校 管 理 员 界 面 中 ， 单 击 用 户 权限 管理 栏目 下 的 用 户 管理 菜单 ， 打 开 
用 户 管理 页 userManager.jsp, 该 页 面 位 于 src/main/webapp/views/user 目录 下 , 如 图 20-21 所 示 。 


中 - = 


[on | som | soon | 
[ee | meen | mee | 
[we | mmm | wee | 
[on | se | eon | 
[oe [ween | sore | 
[ee | meee | aeons | 


图 20-21 用 户 管理 页 userManager.jsp 


在 用 户 管理 页 userManager.jsp 中 ， 需 要 实现 用 户 列 表 的 显示 、 新 增 、 删 除 、 编 辑 、 重 
置 密码 、 角 色 分 配 ， 以 及 按 用 户 类 型 、 单 位 、 用 户 名 搜索 功能 。 本 小 节 主 要 就 用 户 新 增 和 
角色 分 配 功 能 作 详 细 讲 解 ， 由 于 篇 幅 所 限 ， 其 他 功能 不 作 介绍 ， 读 者 可 以 参照 源 代码 加 以 
理解 。 

1. 用 户 新 增 

在 用 户 管理 页 中 ， 单 击 新 增 按钮 ， 打 开 用 户 添加 对 话 框 ， 如 图 20-22 所 示 。 


20-22 ”用 户 添加 对 话 框 
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用 户 添 加 对 话 框 布局 如 下 : 


<div class="modal fade" id="addwin"> 
<div class="modal-dialog" style="width: 400px"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal™" 
aria-hidden="true"> 
&times; 
</button> 
<h4 class="modal-title" id="addwinlable"> 
用 户 添加 
</h4> 
</div> 
<div class="modal-body"> 
<div class="row"> 
<form method="post" class="form-horizontal" 
id="addform"> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 
用 户 名 : 
</label> 
<div class="col-sm-8 controls"> 
<input type="text" value="" 
class="form-control" name="name" id="username add" tabindex="1"” /> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 
密码 : 
</label> 
<div class="col-sm-8 controls"> 
<input type="password" value="" 
class="form-control" name="psw" id="userpsw add" tabindex="2" /> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 
用 户 类 型 : 
</label> 
<div class="col-sm-8 controls"> 
<select onchange="changeSheBao('')" 
data-placeholder=" 请 选择 用 户 类 型 " class="form-control" tabindex="4" 
name="userType" id="userType"> 


<option value="" hassubinfo="true"> 


请 选择 

</option> 

<option value="]1" hassubinfo="true"> 
院 方 

</option> 

<option value="2" hassubinfo="true"> 
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单位 
</option> 
</select> 
</div> 
</div> 


<div class="form-group"> 
<label class="col-sm-3 control-label"> 
单位 : 
</label> 
<div class="col-sm-8 controls" 
style="position:relative"> 
<div class="input-group search div"> 
<input type="text" class="form-control™" 
id="unitId" name="unitId"> 
<ul class="dropdown-menu 
dropdown-menu-right search ul” style="position:absolute;left:0px" 
role="menu"></ul> 
</div> 
</div> 
<div class="form-group"> 
<div class="controls"> 
<button type="submit" class="btn 
btn-gmtx-definel center-block"> 
添加 
</button> 
</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
</div> 
</div> 


在 用 户 添加 对 话 框 中 ， 用 户 类 型 有 院 方 和 单位 两 个 选项 ， 当 用 户 类 型 为 院 方 时 禁用 单 
位 文本 框 。 单 位 文本 框 使 用 了 Bootstrap 的 Search Suggest 插件 ， 相 关 代码 如 下 : 


// 添加 单位 提示 框 

$("#unitId") .bssuggest ('init', { 
clearable : true, 
url : "/ccms/unitinfo/getUnitList", 
showBtn : false, 
08ield 2 "id" 


keyField : "name", 
effectiveFields : [ "name", "outside code" ], 
effectiveFieldsAlias : { 

"name"” : "机 构 名 "， 

"outside_code” : "编码 " 


]v 
}) .on ("onSetSelectValue"， function(e，keyword) { 
unitId add = keyword.id; 
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}) .on ("onUnsetSelectValue"，fEunction(e) { 
unitId add = "''; 
DD); 


在 上 述 代 码 中 ， 通 过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ， 请 求 的 地 址 为 
/ccms/unitinfo/getUnitList, 这 个 url 请 求 将 映射 到 控制 器 类 UnitinfoController 中 的 getUnitList 
方法 获取 单位 列表 。 在 返回 的 结果 中 ，name( 单 位 名 称 ) 作 为 单位 输入 框 显示 内 容 ，id( 单 位 


编号 ) 作 为 单位 输入 框 选择 的 值 。 
在 控制 器 类 UnitinfoController 中 ，getUnitList 方法 的 代码 如 下 : 
// 获取 单位 
QRequestMapping ("/getUnitList") 
@ResponseBody 


public Map<String, Object> getUnitList (HttpServletRequest reqg, 
HttpServletResponse res) { 

// 从 session 中 获取 当前 登录 用 户 ( 院 校 管理 员 ) 的 区 域 编号 

String areaId = 
req.getSession() .getAttribute ("AREANUMBER") .toString () 7 

List<ProUnitinfo> list = unitIinfoService.getUnitList (areaId) 7 

int count = 0; 

if (list != null && list.size() > 0) { 

count = list.size(); 

} 

Map<String, Object> result = new HashMap<Sstring, Object>(); 

result.put ("count", count); 

result.put ("value", list); 

return result; 


} 


在 getUnitList 方法 中 ， 首 先 从 session 中 获取 当前 登录 用 户 ( 院 校 管理 员 ) 的 区 域 编号 ; 
然后 调用 业务 接口 UnitInfoService 中 的 getUnitList 方法 ， 根 据 该 区 域 编号 获取 单位 列表 ; 
接着 创建 Map<String, Object> 类 型 的 对 象 result, 以 count 为 键 保存 获取 的 单位 总 数 , 以 value 
为 键 保存 单位 列表 ， 再 转换 成 JSON 格式 的 字符 串 发 送 到 前 端 页 面 。 

在 接口 UnitInfoService 中 ， 声 明 getUnitList 方法 ， 代 码 如 下 : 

// 获取 单位 列表 

List<ProUnitinfo> getUnitList(String areaId) 

在 接口 UnitInfoService 的 实现 类 UnitInfoServiceImpl 中 ， 实 现 getUnitList 方法 ， 代 码 
如 下 : 

Q@Override 

public List<ProUnitinfo> getUnitList (String areaId) { 


return unitInfoDao.getUnitList (areaId) 


} 

在 实现 类 UnitInfoServiceImpl 的 getUnitList 方法 中 ， 直 接 调 用 了 接口 UnitInfoDao 中 的 
getUnitList 方法 。 

在 接口 UnitInfoDao 中 ，getUnitList 方法 的 代码 如 下 : 
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// 获取 单位 信息 


@Select ("select * frompro unitinfowhere delState= '1' and areaIld=#{areaId} 
order by outside code desc") 
List<ProUnitinfo> getUnitList (String areald); 


填写 用 户 名 、 密 码 ， 选 择 用 户 类 型 为 单位 ， 再 选择 一 个 单位 ， 然 后 单 击 添加 按钮 ， 将 
执行 JavaScript 函数 addUser， 其 代码 如 下 : 


function addUser() { 

Var name = $("#username add") .val (); 
Var psw = $("#userpsw add") .val (); 
var unitId = unitId add; 
var userType = $("#userType") .val (); 
console.info(unitId); 
if (userType != 1) { 

if (isNull (unitId)) { 


swall({ 
title : "系统 提示 "， 
text : "请 选择 机 构 "， 
type : "warning" 
]) 7 
return; 
} 
} 
$.ajax({ 
url : '/ccms/user/addUser', 
type : 'post', 
async : 'true', 
cache : false, 
data : { 


name : name, 
psw : psw, 
unitId : unitId, 
userType : userType 
}, 
dataType : 'json', 
success : function(data) { 
if (data.isExist) { 
swall({ 
title : "系统 提示 "， 
text : "已 存在 该 用 户 名 "， 
type : "warning" 
}， function() { 
$("#username add") .val(''); 
Ws 
} else if (data.isExistUnit) { 
swall({ 
title : "系统 提示 "， 
text : "该 机 构 已 绑 定 用 户 名 "， 


type : "warning™" 
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}, function() { 
$("#unitId") .val (''); 

]) 

} else if (data.success) { 

Swal({ 
title : "系统 提示 "， 
text : "添加 成 功 "， 
type : "success" 

}, function() { 
$("#username add") .val(''); 
$("#userpsw add") .val (''); 
$("#unitId") .val (''); 
$("#userType") .val (''); 
$("#addwin") .modal ('hide'); 
$('#table') .bootstrapTable ("refresh"); 

Fs 

} else { 

swall({ 
title : "系统 提示 "， 
text : "添加 失败 "， 
type : "warning" 

}, function() { 
$("#name") .val (''); 
$("#psw") .val (''); 
$("#unitId") .val (''); 
$("#userType") .val (''); 
$("#addwin") .modal ('hide'); 


}, 
error : function(aa, ee, Irr) { 


swal({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 

}, function() { 
$("#username add") .val (''); 
$("#userpsw add") .val (''); 
$("#unitId") .val (''); 
$("#userType") .val (''); 
$("#addwin") .modal ('hide'); 

nD; 


在 函数 addUser 中 ， 首 先 获 取 填 写 的 用 户 信息 ， 然 后 通过 jQuery AJAX 方式 向 后 台 服 
务 器 发 送 请 求 ， 请 求 的 地 址 为 /cems/user/addUser， 这 个 url 请 求 将 映射 到 控制 器 类 
UserController 中 的 addUser 方法 ; data 参数 用 于 指定 发 送 到 服务 器 的 数据 ，success 用 于 指 
定 请 求 成 功 后 调用 的 回调 函数 ， 控 制 器 类 方法 的 返回 结果 将 传递 给 该 函数 的 参数 data， 然 


Ee 
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后 根据 接收 的 数据 给 出 提示 信息 。 
在 控制 器 类 UserController 中 ，addUser 方法 的 代码 如 下 : 
// 添加 用 户 
@RequestMapping (value = "/addUser", method = { RequestMethod.GET, 


RequestMethod.POST }) 
Public String addUser (SysUser user, HttpServletRequest reqg, 


HttpServletResponse res) { 
// 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 
String areaId = 
req.getSession() .getAttribute ("AREANUMBER") .上 toString() 7 
// 给 对 象 user 设置 所 属 区 域 编 号 属性 
user.setAreald (areaId) 7 
Jobject = new Jsonobject() 7 
// 从 session 中 获取 当前 区 域 管理 员 用 户 编号 
String operateId = req.getSession() .getAttribute ("USERID") .tostring(); 
// 给 对 象 user 设置 操作 人 属性 
user.setOperatorId (operateId) 7 
// 给 对 象 user 设置 密码 属性 
user.setPsw (MDS5Util .MD5 (user.getPsw())); 
// 判断 该 用 户 名 是 否 存 在 
String existName = userService.isExistName (user.getName (), "", arealIld); 
// 判断 该 单位 是 否 存在 
String existUnit = userService.isExistUnit (user.getUnitId(), "", 
areaId) 7 
if (existUnit .equals ("exitUnit")) { 
joObject.addProperty ("isExistUnit", true); 
} else if (existName .equals ("exit")) { 
joObject.addProperty ("isExist", true); 
} else if (existName .equals ("no")) { 
// 调用 业务 方法 添加 用 户 
boolean result = userService.addUser (user); 
joObject.addProperty("success", result); 
try { 
ServletOutputStream jos = res.getOutputstream(); 
jos.write(jObject.tostring() .getBytes ("utf-8")); 
} catch (IOException e) { 
e.printstackTrace () 7 
return null; 


} 


addUser 方法 有 一 个 SysUser 类 型 的 参数 user， 用 于 封装 从 前 端 页 面 传递 来 的 新 增 用 户 
信息 。 在 addUser 方法 中 ， 首 先 从 session 中 获取 当前 院 校 管理 员 的 区 域 编号 和 用 户 编号 ， 
给 对 象 user 设置 所 属 区 域 编号 和 密码 属性 ， 然 后 依次 调用 业务 接口 UserService 中 的 
isExistName 方法 判断 用 户 名 是 否 已 经 存在 ， 调 用 isExistUnit 方法 检验 该 单位 是 否 已 经 被 绑 
定 ; 最 后 调用 业务 接口 UserService 中 的 addUser 方法 添加 用 户 。 

在 接口 UserService 中 ，isExistName、isExistUnit 和 addUser 方法 的 声明 如 下 : 


@< ee 
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// 查询 是 否 存在 该 用 户 名 

public String isExistName (String name, String userCode, String areaId) 
// 检测 是 否 存在 该 单位 

public String isExistUnit (String unitId, String userCode, String areald); 
// 添加 用 户 


Public boolean addUser (SysUser user); 


在 实现 类 UserServiceImpl 中 ， 实 现 isExistName 方法 ， 代 码 如 下 : 


@Override 
public String isExistName (String name, String userCode, String areaId) 1{ 
String result; 
int i = userDao.isExistName (name, userCode, areald); 
i {30} { 
result = "exit"; 
} else { 
result = "no"; 


} 


return result; 


} 
在 isExistName 方法 中 ， 直 接 调 用 了 接口 UserDao 中 的 isExistName 方法 ， 代 码 如 下 : 
// 检验 是 否 存 在 该 用 户 名 


@Select ("select count (userCode) from sys_user where name = #{name} and 
userCode <> #{userCode} and areaId=#{fareaId}j and delState = 1") 

public int isExistName (@Param("name") String name, @Param("userCode") String 
userCode, @Param("areald") String areald); 


在 实现 类 UserServiceImpl 中 ， 实 现 isExistUnit 方法 ， 代 码 如 下 : 

@Override 

public String isExistUnit (String unitId, String userCode, String areaId) { 
String result; 
int i = userDao.isExistUnit (unitId, userCode, areald); 
iE {DS 0 A 


result = "exitUnit"; 
} else { 
result = "noUnit"; 


} 


return result; 


} 
在 isExistUnit 方法 中 ， 直 接 调用 了 接口 UserDao 中 的 isExistUnit 方法 ， 代 码 如 下 : 
// 检验 该 单位 是 否 已 经 被 绑 定 


@Select ("select count (userCode) from sys_user where unitId = #{unitId} and 
userCode <> #{userCode} and unitId <> '' and areald =#{arealId} and unitId 
is not null and delstate = 1") 

public int isExistUnit(@Param("unitId") String unitId, @Param("userCode") 
String userCode, QParam("areaId") 


String areaId) 7 


在 实现 类 UserServiceImpl 中 ， 实 现 addUser 方法 ， 代 码 如 下 : 
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@Override 

public boolean addUser (SysUser user) { 
Object[] params = null; 
String code = UUIDGenerator.getUUID(); 
user.setUserCode (code); 
user.setDelstate (1); 
int result = userDao.insertUser (user); 
return result > 0; 


} 
在 addUser 方法 中 ， 直 接 调 用 了 接口 UserDao 中 的 insertUser 方法 ， 代 码 如 下 : 
// 添加 用 户 


@Insert ("insert into sys_user(userCode,name,psw,operatorId, 
delstate,unitId,userType,areald) " + "values(#{userCode}, 
#{name},#{psw},#{operatorId},#{delstate},#{unitId}, 
#{userType},#{areaId})") 

public int insertUser(SysUser user); 


在 用 户 添加 对 话 框 中 ， 填 写 用 户 名 张 山 山 、 密 码 123456， 选 择 用 户 类 型 为 单位 ， 选 择 


单位 为 之 前 添加 的 张 山 山 ， 再 单 击 添加 按钮 ， 会 在 数据 表 sys_user 中 插入 一 条 记录 。 此 时 ， 
在 用 户 管理 页 中 的 用 户 列表 上 ， 会 出 现 该 用 户 的 记录 ， 如 图 20-23 所 示 。 
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图 20-23 ”用户 列表 
创建 新 用 户 张 山 山 后 ， 由 于 还 未 为 其 分 配角 色 ， 所 以 用 户 列表 中 所 属 角色 一 栏 显 示 为 


空 。 接 下 来 ， 将 讲解 角色 分 配 功能 的 实现 过 程 。 


代码 如 下 : 


@< SO 


2. 角色 分 配 
在 用 户 管理 页 中 的 用 户 列表 上 ， 单 击 某 条 用 户 

记录 (如 张 山 山 ) 中 的 角色 分 配 按 钮 ， 显 示 “ 配 置 角 :ku 

色 ” 对 话 框 ， 如 图 20-24 所 示 。 Bi Be BR 有 Bt 本 
角色 分 配 可 以 分 成 原 有 角色 显示 和 新 角色 绑 定 丰 让 生生 和 

两 个 阶段 来 实现 。 确定 


1) 原 有 角色 显示 
在 用 户 管理 页 中 ，“ 配 置 角色 ”对 话 框 的 布局 


图 20-24 “配置 角色 ”对 话 框 
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<!-- 配 置 角色 对 话 框 --> 
<div class="modal fade" id="bindRoleWin"> 
<div class="modal-dialog" style="width: 400px"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal™" 
aria-hidden="true">&times;</button> 
<h4 class="modal-title"> 配 置 角色 </h4> 
</div> 
<div class="modal-body"> 
<div class="row"> 
<form method="post" class="form-horizontal™" 
id="bindRoleform"> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 用 户 名 : 
</label> 
<div class="col-sm-8 controls"> 
<input type="text" Value="" class="form-control" 
name="name" id="username bindRole" 
disabled tabindex="1" /> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-3 control-label"> 所 属 角 色 : 
</label> 
<div class="col-sm-8 controls" id='roleAccess'></div> 
</div> 
<div class="form-group"> 
<div class="controls"> 
<button class="btn btn-gmtx-definel 
center-block" onclick="javascript:bindRole();return false;"> 


确定 </button> 

</div> 
</div> 
</form> 
</div> 
</div> 
</div> 
</div> 
</div> 


在 配置 角色 对 话 框 中 ， 原 有 角色 的 显示 是 通过 一 组 复 选 框 的 选中 与 否 来 实现 的 ， 每 个 
复 选 框 代表 一 个 角色 。 为 了 实现 这 一 效果 ， 在 用 户 管理 页 中 首先 定义 一 个 id 为 roleAccess 
的 <div> 标 签 ， 然 后 调用 JavaScript 函数 loadRoleChk 来 生成 多 个 角色 复 选 框 ，loadRoleChk 
函数 的 调用 代码 如 下 : 


loadRoleChk ("/ccms/role/getRoleList", "roleAccess"); 


函数 loadRoleChk 定义 在 src/main/webapp/commons/jslib 目录 下 的 CommonValue.js 文 件 
中 ， 其 代码 如 下 : 
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function loadRoleChk (url, idstr) { 
$.ajax({ 
wel "ls 
dataType : 'json', 
data : {}, 
type : 'post', 
success : function(data) { 
var Options = ""s 
$.each( 
data.roleList, 
function(key, val) { 
options += "<input type='checkbox' class='roles' 
name="roles' id="'" + val.roleCode 
™ value="'" 
val.roleCode 


msm 


+ + + 十 


val.roleName + "&nbsp;&nbsp;" 
]) 7 
$('#' + idStr) .empty()7 
$('#' + idStr) .html (options); 
] 
error : function() { 
} 
1); 
} 


在 loadRoleChk 函数 中 , 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 , 请 求 的 地 址 为 


/ccms/role/getRoleList, 这 个 url 请 求 将 映射 到 控制 器 类 RoleController 中 的 getRoleList 方法 ; 
success 用 于 指定 请 求 成 功 后 调用 的 回调 函数 ， 控 制 器 类 方法 的 返回 结果 将 传递 给 该 函数 的 
参数 data， 然 后 根据 接收 的 数据 生成 角色 复 选 框 。 


在 控制 器 类 RoleController 中 ，getRoleList 方法 的 代码 如 下 : 
// 获取 角色 列表 


@RequestMapping (value = "/getRoleList", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public Map<String, Object> getRoleList (HttpServletRequest reqg, 
HttpServletResponse resp) throws IOException { 
// 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 
String areaId = req.getSession() .getAttribute ("AREANUMBER") .tostring(); 
// 根据 当前 区 域 管理 员 的 区 域 编号 ， 获 取 角 色 列 表 
List<SysRole> list = roleService.getRoleList (areaId) 7 
int count = 0; 
i£f (list != null && list.size() > 0) { 
count = list.size(); 
’ 
Map<string, Object> result = new HashMap<string, Object>(2); 
result.put ("count", count); 
result.put ("roleList", list); 
return result; 


} 


@< RE 
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在 getRoleList 方法 中 ， 首 先 从 session 中 获取 当前 区 域 管理 员 的 区 域 编号 ,然后 调用 业 
务 接口 RoleService 中 的 getRoleList 方法 , 根据 当前 区 域 管理 员 的 区 域 编号 , 获取 角色 列表 。 


在 RoleService 接口 中 ，getRoleList 方法 的 声明 如 下 : 
// 根据 areaId 获取 角色 列表 


public List<SysRole> getRoleList(String areaId) 7 


在 实现 类 RoleServiceImpl 中 ， 实 现 getRoleList 方法 ， 代 码 如 下 : 


@Override 


public List<SysRole> getRoleList (String areaId) { 


return roleDAO.getRoleList (areaId) ;7 
} 


在 实现 类 RoleServiceImpl 的 getRoleList 方法 中 ， 直 接 调用 了 接口 RoleDAO 中 的 
getRoleList 方法 。 在 RoleDAO 接口 中 ，getRoleList 方法 的 代码 如 下 : 


@Select ("select * from sys_role where areald=#{areaId}") 
Public List<SysRole> getRoleList (@Param("areaId") String areaId) 7 


角色 复 选 框 生成 后 ， 可 以 通过 设置 复 选 框 的 选中 状态 来 显示 用 户 的 原 有 和 角色， 而 将 哪 
些 角色 复 选 框 设置 为 选中 状态 ， 则 是 在 单 击 角色 分 配 按钮 时 完成 的 。 单 击 角 色 分 配 按 钮 ， 


将 执行 JavaScript 函数 bindRoleShow， 其 代码 如 下 : 


Var userCode bindRole = ''; 
function bindRoleShow(code, name) { 


$("#roleAccess") .find("input[type='checkbox']") .each (function() { 


$ (this) .prop('checked', false); 
Ds; 
userCode bindRole = code; 
$('#username bindRole') .val (name); 


$.ajax({ 
url : '/ccms/user/getCheckedRole', 
type : 'post', 


async : false, 
cache : false, 
data : { 
userCode : userCode bindRole 
ls 


dataType : 'json', 
success : function(data) { 
roleIds = data.roleCodes; 


for (var i = 0; i < roleIds.length; i++) { 
if (roleIds[i] != null && roleIds[il != '') { 
$("#" + roleIds[i]) .prop("checked", true); 


} 


error : function(aa, ee, II) { 
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$('#bindRoleWin') .modal ('show'); 


} 


bindRoleShow 函数 有 两 个 参数 ，code 表示 用 户 编号 ; name 表示 用 户 名 。 在 bindRoleShow 
函数 中 ， 首 先 取 消 所 有 角色 复 选 框 的 选中 状态 ， 然 后 通过 jQuery AJAX 方式 向 后 台 服务 器 
发 送 请 求 ， 请 求 的 地 址 为 /ccems/user/getCheckedRole， 这 个 url 请 求 将 映射 到 控制 器 类 
UserController 中 的 getCheckedRole 方法 ; success 用 于 指定 请 求 成 功 后 调用 的 回调 函数 ， 控 
制 器 类 方法 的 返回 结果 将 传递 给 该 函数 的 参数 data， 然 后 根据 接收 的 数据 来 选中 相应 角色 
复 选 框 。 

在 控制 器 类 UserController 中 ，getCheckedRole 方法 的 代码 如 下 : 


// 获取 已 绑 定 的 rolecodes 
@RequestMapping (value = "/getCheckedRole", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public Map<String, Object> getCheckedRole(String userCode, 
HttpServletRequest req, HttpServletResponse res) { 
Map<String, Object> result = new HashMap<string, Object>(); 
List<String> list = userService.getCheckedRole (userCode); 
result.put ("roleCodes", list); 
return result; 


} 


在 getCheckedRole 方法 中 ， 调 用 了 业务 接口 UserService 中 的 getCheckedRole 方法 。 在 
UserService 接口 中 ，getCheckedRole 方法 的 声明 如 下 : 


// 根据 Userid 获取 用 户 角色 


public List<String> getCheckedRole (String userCode); 


在 实现 类 UserServiceImpl 中 ， 实 现 getCheckedRole 方法 ， 代 码 如 下 : 


@Override 

public List<String> getCheckedRole (String userCode) { 

return userDao.getCheckedRole (userCode); 

} 

在 实现 类 UserServiceImpl 的 getCheckedRole 方法 中 ， 直 接 调 用 了 接口 UserDao 中 的 
getCheckedRole 方法 ， 从 sys_user role 表 中 根据 用 户 编号 userCode 获取 用 户 角 色 编 号 
roleCode 列表 。 在 UserDao 接口 中 ，getCheckedRole 方法 的 代码 如 下 : 

// 从 sys_user_role 表 中 根据 usercode 获取 rolecode 列表 

@Select ("select roleCode from sys user role where userCode=#{userCode}") 

public List<String> getCheckedRole (@Param("userCode") 


String userCode); 


至 此 ， 作 为 角色 分 配 功 能 第 一 阶段 的 原 有 角色 显示 就 实现 了 。 接 下 来 ， 将 实现 第 二 阶 
段 的 新 角色 绑 定 。 

2) 新 角色 绑 定 

在 配置 角色 对 话 框 中 ， 选 中 需要 给 用 户 分 配 的 角色 复 选 框 ， 单 击 确定 按钮 ， 将 执行 
JavaScript 函数 bindRole， 为 用 户 绑 定 新 的 角色 ， 其 代码 如 下 : 


@< ed a 
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function bindRole() { 
var roles = ""; 
Var r = document .getElementsByName ("roles"); 
for (var i = 0; i < r.length; i++) { 
if (r[i].checked) { 
roles = roles + r[il].value + ","; 
: 
} 
if (roles == "") { 
swal (' 系统 提示 ' ，' 请 至 少 选择 一 个 角色 !'，'warning'); 


return false; 


} 

$.ajax({ 
url : '/ccms/user/bindRole', 
type : 'post', 
async : 'true', 


cache : false, 
data : { 
userCode : userCode bindRole, 
roleCodes : roles 
}, 
dataType : 'json', 
success : function(data) { 
if (data.success) { 
swal ("系统 提示 ! "， " 绑 定 成 功 。"， "success") ; 
$('#table') .bootstrapTable ("refresh"); 
} else { 
swall({ 
title : "系统 提示 "， 
text : " 绑 定 失败 "， 
type : "warning" 
Fs 
} 
$('#bindRoleWin') .modal ('hide'); 


error : function(aa, ee, rr) { 
swall{ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 


type : "warning" 


在 函数 bindRole 中 ， 首 先 获 取 所 有 选中 的 角色 编号 ， 并 以 逗号 分 隔 后 保存 在 变量 roles 
中 , 然后 通过 jQuery AJAX 方式 向 后 台 服务 器 发 送 请 求 ， 请求 的 地 址 为 /ccms/muserbindRole， 
这 个 url 请 求 将 映射 到 控制 器 类 UserController 中 的 bindRole 方法 ; data 用 于 指定 发 送 到 服 
务 器 的 数据 ，userCode 表示 用 户 编号 ，roleCodes 表示 为 该 用 户 分 配 的 以 逗号 分 隔 的 角色 编 


Spring + Spring MVC + MyBatis :333333333335 
框架 技术 精 讲 与 整合 案例 一 -一 


号 ;success 用 于 指定 请 求 成 功 后 调用 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 参数 
data， 然 后 根据 接收 的 数据 给 出 提示 信息 。 

在 控制 器 类 UserController 中 ，bindRole 方法 的 代码 如 下 : 

// 绑 定 新 角色 

@RequestMapping (value = "/bindRole", method = { RequestMethod.GET, 


RequestMethod.POST }) 
Public String bindRole(SysUser user, HttpServletRequest reqg, 


HttpServletResponse res) throws UnsupportedEncodingException { 
String areaId = 
req.getSession() .getAttribute (CommonValue .AREANUMBER) .上 toString() 7 
int result = userService.bindRole (user.getUserCode(), 
user.getRoleCodes(), areald); 
JSONObject jobject = new JSONObject (); 
joObject.put ("success", result); 
try { 
ServletOutputSstream jos = res.getOutputstream(); 
jos.write(jObject.tostring() .getBytes ("utf-8")); 
jos.flush(); 
jos.close(); 
} catch (IOException e) { 
e.printstackTrace (); 
} 
return null; 


} 


在 上 述 bindRole 方 法 中 ,调用 了 业务 接口 UserService 中 的 bindRole 方 法 。 在 UserService 
接口 中 ，bindRole 方法 的 声明 如 下 : 


// 根据 Userid 绑 定 role 
public int bindRole (String userCode, String roleCodes, String areaId) ， 


在 实现 类 UserServiceImpl 中 ， 实 现 bindRole 方法 ， 代 码 如 下 : 


@Override 
public int bindRole (String userCode, String roleCodes, String areaId) { 
if (roleCodes.length() > 0) 1{ 
roleCodes = roleCodes.substring(0, roleCodes.length() - 1); 
} 
String[] roleCode = roleCodes.split(","); 
int resulta = userDao.delRoleByUserId (userCode); 
// 当 给 某 个 角色 删除 全 部 权限 时 
if ((resulta > 0) && (roleCode == null || roleCodes.isEmpty())) { 
return 1; 


} 
int result = 0; 
for (int i = 0; i < roleCode.length; i++) { 
result = userDao.bindRoleByUserId (UUIDGenerator.getUUID(), 
userCode, roleCode[i], areald); 
} 


return result; 


@< Sa 
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在 实现 类 UserServiceImpl 的 bindRole 方法 中 ， 首 先 调用 接口 UserDao 中 的 
delRoleByUserId 方法 删除 指定 用 户 编 号 的 角色 ; 然后 调用 接口 UserDao 中 的 
bindRoleByUserId 方法 给 用 户 绑 定 新 角色 。 

在 接口 UserDao 中 ，delRoleByUserId 方法 的 代码 如 下 : 

// 删除 指定 用 户 编号 的 角色 

@Delete ("delete from sys user _ role where userCode=#{userCode}") 

public int delRoleByUserId(@Param("userCode") String userCode); 


在 接口 UserDao 中 ，bindRoleByUserId 方法 的 代码 如 下 : 
// 给 用 户 绑 定 新 的 角色 


@Insert("insert into sys user role(urId,userCode,roleCode,areaIld) values 

(#{urId},#{userCode},#{roleCode},#{areaId})") 

Public int bindRoleByUserId (@Param("urId") String urId, @Param("userCode") 

String userCode, @Param("roleCode") String roleCode, @Param("arealId") String 

areaId) 7 

以 用 户 张 山 山 为 例 ， 在 “配置 角色 ”对 话 框 中 ， 选 中 “学 生 ” 复 选 框 ， 单 击 “ 确 定 ” 
按钮 。 此 时 ， 在 用 户 管理 页 的 用 户 列表 中 ， 可 以 看 到 ， 张 山 山 这 条 记录 所 属 角色 一 栏 显示 
为 学 生 ， 如 图 20-25 所 示 。 


用 户 名 所 属 单位 用 户 类 理 。。 所 属 角色 撞 作 人 霹 fFH 问 


操作 


图 20-25 用 户 张 山 山 记录 
至 此 ， 角 色 分 配 功 能 就 讲解 完了 。 


20.8 单位 用 户 功能 


在 后 台 登 录 页 中 ， 若 以 用 户 名 张 山 山 、 密 码 123456 登录 系统 ， 则 以 单位 用 户 的 身份 进 
入 系统 首页 面 index.jsp， 如 图 20-6 所 示 。 单 位 用 户 功 能 包括 发 送 消息 、 接 收 消息 、 投 票 、 
查看 投票 和 宿舍 报修 。 


20.8.1 发 送 消息 


在 图 20-6 所 示 的 单位 用 户 界面 中 ， 单 击 消息 管理 栏目 下 的 发 消息 菜单 ， 打 开 已 发 送 消 
息 列表 页 SendNoticeList.jsp， 该 页 面 位 于 src/main/webapp/views/notice 目录 下 ， 如 图 20-26 
所 示 。 

在 已 发 送 消息 列表 页 中 ， 可 以 新 增 消息 、 查 看 消息 、 删 除 消息 。 对 用 户 张 山 山 来 说 ， 
由 于 还 没有 发 送 过 任何 消息 ， 因 此 已 发 送 消息 列表 中 没有 任何 记录 。 只 有 新 增 消息 后 ， 才 
能 在 列表 中 显示 消息 记录 ， 也 才 可 以 查看 消息 和 删除 消息 。 
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四 -= 


图 20-26 已 发 送 消息 列表 页 


1. 新 增 消息 
在 已 发 送 消息 列表 页 中 ， 单 击 “ 新 增 ” 按 钮 ， 将 执行 JavaScript 函数 addNotice， 其 
代码 如 下 : 


function addNotice() { 
window.location.href = "/ccms/views/notice/sendNotice.jsp"; 


} 
此 时 ,页 面 重 定 向 到 消息 发 送 页 sendNotice.jsp, 该 页 面 位 于 src/main/webapp/views/notice 
目录 下 ， 页 面 效果 如 图 20-27 所 示 。 


图 20-27 消息 发 送 页 
在 消息 发 送 页 中 ，“ 类 型 ”下 拉 列 表 框 中 有 消息 和 投票 两 个 选项 ， 发 送 对 象 右 侧 有 一 
个 “批量 添加 ”按钮 ， 可 用 来 添加 消息 发 送 的 对 象 。 单 击 这 个 按钮 ， 将 执行 JavaScript 函数 
selectSecond， 其 代码 如 下 : 


function selectSecond() { 
layer.open({ 
i 
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title : "批量 添加 单位 "， 
shade : 0.8, 

fix : false, 

shadeClose : true, 

area : [ 800pz "90%°" ];s 


content : '/ccms/views/notice/secondBatch.jsp', 
end : function() { 
s 


Hs 
} 


在 函数 selectSecond 中 使 用 了 layer， 这 是 一 个 常用 的 Web 弹出 框 组 件 。content 用 于 指 
定 弹出 框 中 显示 的 内 容 ， 这 里 为 /cems/views/notice/secondBatch.jsp。secondBatch.jsp 页 面 可 
用 来 批量 添加 单位 ， 效 果 如 图 20-28 所 示 。 


批量 乱 加 兰 伍 园 


土木 机 械 学 渤 
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FE 教 EA 
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教师 4 条 入 

a 张 X 酌 
京山 山 34AA 
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20-28 ”secondBatch.jsp 页 面 


在 secondBatch.jsp 页 面 的 下 方 ， 列 出 了 系统 中 所 有 的 单位 名 称 。 当 然 ， 也 可 以 根据 单 
位 名 称 或 单位 类 别 搜索 所 需 的 单位 名 称 。 通 过 选中 复 选 框 ， 可 以 指定 要 将 信息 发 送 给 哪些 
单位 。 这 里 选中 学 生 AA 前 的 复 选 框 ， 然 后 单 击 添加 单位 按钮 。 此 时 ， 页 面 返 回 到 消息 发 
送 页 ， 如 图 20-29 所 示 。 


20-29 选择 发 送 对 象 后 的 消息 发 送 页 
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选择 发 送 对 象 后 ， 选 择 类 型 为 消息 ， 标 题 为 “这 是 第 一 条 测试 通知 ”， 消 息 内 容 为 “这 
是 第 一 条 测试 通知 ， 请 学 生 AA 查收 ! ”， 再 单 击 完成 按钮 。 此 时 ， 将 执行 JavaScript 函数 


addNotice， 其 代码 如 下 : 


function addNotice (editor) 


{ 
var type = $("#type") .val (); 
$("#title") .val (); 


var title 


var mainBody 


if (mainBody == null || mainBody == 
swal({ 
title : "请 输入 内 容 "， 
人 


Ds; 
return false; 


selectedCount = 07 
secondIdsAry = new Array(); 


secondIds 


encodeURIComponent (editor -html ()); 


undefined || mainBody | 


$('input [name="checkbox unit parent"] :checked') .each (function() { 


Var secondEle = $ (this) .val() .split(" 


secondIdsAry.push (secondEle[0]); 
selectedCount++; 
Dy? 
if (selectedCount <= 0) { 
swall({ 
title : 
text 3 


"请 选择 单位 "， 


1D); 
return false; 
¥ 
secondIds 
$.ajax({ 
url 
type 
async 
cache 
data : { 
type : type, 
secondIds : 


secondIdsAry.join(" 


'/ccms/notice/addNotice', 
"post"s 
Ee 
false, 


secondIds, 
: mainBody, 
rE 


content 

人 
]， 
dataType 
success 


"json', 
function (data) 


{ 


if (data.success) { 
swall({ 
title : "系统 提示 "， 
text : "添加 成 功 "， 
EVpe, 2 全 二 改作 CC 二 从 


] 


Eunction() 


. 
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forwardListPage(); 
]) 7 
} else { 
swall({ 
title : "系统 提示 "， 
text : "添加 失败 "， 
type : "warning" 
}, function() { 
Ds 


] 
error : function(aa，ee rr) { 
swal({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
}, function() { 
]) 7 


ys 
} 


在 函数 addNotice 中 ,首先 获取 表单 中 填写 的 消息 信息 ， 然 后 通过 jQuery AJAX 方式 向 
后 台 服 务 器 发 送 请 求 ， 请 求 的 地 址 为 /ccems/notice/addNotice， 这 个 url 请 求 将 映射 到 控制 器 
类 NoticeController 中 的 addNotice 方法 ;data 用 于 指定 发 送 到 服务 器 的 数据 ，success 用 于 
指定 请 求 成 功 后 调用 的 回调 函数 ， 服 务 器 返回 的 数据 将 传 给 该 函数 的 data 参数 ， 然 后 根据 
接收 的 数据 给 出 提示 信息 。 

在 控制 器 类 NoticeController 中 ，addNotice 方法 的 代码 如 下 : 


package com.ccms.controller; 
import com.ccms.tools.CommonTool; 
import com.ccms.tools.JsonUtil; 
import com.google.gson.JsonObject; 


@Controller 
@RequestMapping (value = "/notice", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public class NoticeController { 

@Autowired 

private NoticeService noticeService; 

JsonUtil<Notice> json = new JsonUtil<Notice>(); 

// 添加 notice 

@RequestMapping (value = "/addNotice", method = { RequestMethod.GET, 
RequestMethod.POST }) 

@ResponseBody 

public Map<String, Object> addNotice (Integer type, String secondIds, 
String content, String title, HttpServletRequest reqg, 

HttpServletResponse resp) throws IOException { 
content = CommonTool .changeImageSrc (req, URLDecoder.decode (content, 

a se 
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Notice notice = new Notice(); 
notice.setType (type); 
notice.setTitle (title) 7 
notice.setContent (Content) 7 
String uid = (String) req.getSession() .getRAttribute ("USERID") 7 
boolean flag = noticeService.addNotice(notice, secondIds, uid); 
Map<String, Object> result = new HashMap<string, Object>(); 
if (flag) { 
result.put ("success", true); 
} else { 
result.put ("success", false); 
} 
return result; 


} 


在 addNotice 方法 中 , 调用 业务 接口 NoticeService 中 的 addNotice 方法 。 在 NoticeService 
接口 中 ，addNotice 方法 的 声明 如 下 : 


Package com.ccms.service; 


public interface NoticeService { 
// 添加 
Public boolean addNotice (Notice notice, String answerids, String uid); 


} 
在 NoticeService 接口 的 实现 类 NoticeServiceImpl 中 ， 实 现 addNotice 方法 ， 代 码 如 下 : 


Package com.ccms.service.impl; 


@Service ("noticeService") 
@Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class NoticeServiceImpl implements NoticeService { 
@Autowired 
NoticeDao noticeDao; 
@Ooverride 
public boolean addNotice (Notice notice, String answerids, String uid) 


// 添加 notice 
String nid = UUIDGenerator.getUUID(); 
notice.setId(nid); 
notice.setUserId (uid); 
notice.setOperatetime (CommonTool .getNowDatestr ()); 
int resultNotice = noticeDao.addNotice (notice); 
// 添加 answer 
String[] ids = answerids.split(", 
int count = 0; 
for (int i = 0; i < ids.length; i++) 1 

count += noticeDao.addAnswer (UUIDGenerator.getUUID(), nid, 


ids[i]); 


@< ed a a 


第 20 章 校园 通讯 管理 系统 


' 


return (resultNotice > 0) && (count > 0); 


在 实现 类 NoticeServiceImpl 的 addNotice 方法 中 ， 首 先 调 用 接口 NoticeDao 中 的 
addNotice 方法 , 向 数据 表 notice 中 插入 一 条 消息 ; 然后 调用 接口 NoticeDao 中 的 addAnswer 
方法 ， 向 数据 表 answer 中 插入 一 条 回复 信息 。 

在 NoticeDao 接口 中 ，addNotice 方法 的 代码 如 下 : 

// 添加 通知 


Q@Insert ("insert into notice 
Values (#{id},#{userId},#{title},#{content},#{operatetime},#{type})") 
public int addNotice (Notice notice); 


在 NoticeDao 接口 中 ，addAnswer 方法 的 代码 如 下 : 
// 添 加 通知 回复 


@Insert ("insert into answer(id,nid,uid) values (#{id},#{nid},#{uid})") 
public int addAnswer (@Param("id") String id, @Param("nid") String nid, 
@Param("uid") String uid); 
发 送 消息 时 ， 如 果 选 择 类 型 为 投票 ， 标 题 为 “这 是 一 条 投票 测试 ”， 消 息 内 容 为 “这 
是 一 条 投票 测试 ， 请 学 生 AA 投票 ! ”， 再 单 击 “完成 ”按钮 ， 就 可 以 添加 一 个 投票 消息 。 
发 送 消息 和 投票 后 ， 在 已 发 送 消息 列表 页 SendNoticeListjsp 中 ， 可 以 看 到 这 两 个 类 型 的 消 
息 ， 如 图 20-30 所 示 。 


和 a 2 
过 是 一 天 按 要 网 201807.09 120000 == | = | 
ET 20180708 212235 “= = | = | 


7 和 1 到 2 条 已 杂 . S27 印记 录 


20-30 已 发 送 消息 列表 
2. 已 发 送 消 息 列表 显示 
在 已 发 送 消息 列表 页 SendNoticeListjsp 中 ， 为 了 显示 已 发 送 消 息 列表 ， 首 先 定义 了 一 
个 id 为 table 的 <div> 标 签 ， 代 码 如 下 : 


<div class="ibox-content"> 
<table id="table"> </table> 
</div> 


然后 通过 JavaScript 对 这 个 <table> 标 签 进行 初始 化 ， 代 码 如 下 : 


Spring + Spring MVC + MyBatis 
框架 技术 精 讲 与 整合 案例 一 


$(function() { 
var S$table = $('#table'); 
$table.bootstrapTable ({ 
url : "/ccms/notice/getAllNotice", 


method : 'post', 
contentType : "application/x-www-form-urlencoded", 
dataType : "json", 
pagination : true，// 分 页 
pagesize : 50, 
pageNumber : 1, 
singleSelect : false, 
queryParamsType : "undefined", 
queryParams : function queryParams (params) { // 设 置 查 询 参数 

var param = { 

page : params.pageNumber, 
rows : params.pageSize, 

}; 

return param; 
}, 
cache : false, 
sidePagination : "server"，// 服 务 端 处 理 分 页 
columns : [ 
{ 

title :' 标 题 '， 

EL EL 

align : 'center', 

valign : 'middle' 


title : ' 时 间 '， 

field : 'operatetime', 
align : 'center', 
valign : 'middle' 


title :' 类 型 '， 
field : 'type', 
align : 'center', 
valign : 'middle', 
formatter : function(value, row, index) { 
if (value == '1') { 
return "消息 "; 


} else if (value == '2') { 
return "投票 "; 
} else if (value == '3') { 


return "报修 "; 


title :' 操 作 '， 
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field : "id', 
formatter : function(value, row, index) { 
Var e = '<a href="#" class="btn btn-gmtx-definel™" 
onclick="check(\'' + row.id + '\')"> 查 看 </a>'; 
var d = "gnbsp;<a href="#" class="btn btn-gmtx-definel™" 
onclick="del (\'' + row.id + "'\') "> 删除 </a>"'; 
return e + d7 
十 
Bs 
Ds 


在 $(function0 { 六 代码 段 中 ， 通 过 调用 bootstrapTable 方法 ， 将 <table> 标 签 创建 为 
Bootstrap 的 table 控件 ， 并 通过 设置 一 系列 属性 来 初始 化 这 个 table 控件 。url 属性 用 于 设置 
table 控件 的 数据 源 ， 这 里 为 /cems/notice/getAlINotice， 这 个 url 请 求 将 映射 到 后 台 控 制 器 类 
NoticeController 中 的 getAlINotice 方法 ; method 属性 用 于 设置 请 求 方式 ， 这 里 为 post 方式 ; 
contentType 属性 用 于 设置 发 送 到 服务 器 的 数据 编码 类 型 ， 这 里 为 application/x-www-form- 
urlencoded; dataType 属性 用 于 设置 服务 器 返回 的 数据 类 型 ， 这 里 为 json; pagination 属性 用 
于 设置 是 否 显 示 分 页 , 这 里 为 true, 表示 人 允许 分 页 ; pageSize 属性 用 于 设置 每 页 的 记录 行 数 ， 
这 里 为 50; pageNumber 属性 用 于 设置 首页 页 码 ， 这 里 为 1; singleSelect 属性 用 于 设置 是 否 
单 选 ， 这 里 为 false， 表 示 可 以 多 选 ;queryParamsType 属性 用 于 设置 参数 格式 ， 这 里 为 
undefined; queryParams 属性 用 于 设置 查询 参数 ，bootstrap 的 table 控件 会 将 page 和 rowse 
这 两 个 参数 传递 到 控制 器 类 NoticeController 中 的 getAllNotice 方法 ; cache 属性 用 于 设置 是 
否 启用 AJAX 数据 缓存 ， 这 里 为 false， 表示 禁用 ; sidePagination 属性 用 于 设置 在 哪里 进行 
分 页 ， 可 选 值 为 client 或 者 server， 这 里 为 server， 表 示 由 服务 端 处 理 分 页 ， columns 用 于 设 
置 列 。 

Bootstrap table 控件 的 数据 源 来 自控 制 器 类 NoticeController 中 的 getAlINotice 方法 的 返 
回 结 果 ， 代 码 如 下 : 

// 查询 所 有 notice 

@RequestMapping (value = "/getAllNotice", method = { RequestMethod.GET, 

RequestMethod.POST }) 

@ResponseBody 

public Map<Sstring, Object> getAllNotice(@ModelAttribute Notice notice, 


Integer page, Integer rows,HttpServletRequest req, HttpServletResponse rep) 
{ 


// 获取 request 中 保存 的 当前 登录 用 户 的 编号 

String uid = (String) req.getSession() .getRttribute ("USERID") 7 
// 将 该 用 户 编号 设置 到 对 象 notice 中 

notice.setUserId(uid) > 

// 初始 化 分 页 类 对 象 

Pager pager = new Pager() 7 

pager.setCurPage (page); 

pager.setPerPageRows (rows); 

// 创建 对 象 params， 用 于 封装 查询 条 件 

Map<Sstring, Object> params = new HashMap<Sstring, Object>(); 
params.put ("notice", notice); 


// 获取 满足 条 件 的 消息 总 数 
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int totalCount = noticeService.count (params); 
// 根据 查询 条 件 获取 当前 页 的 消息 列表 
List<Notice> notices = noticeService.findNotice (notice, pager); 
// 创建 对 象 result， 用 于 保存 返回 结果 
Map<Sstring, Object> result = new HashMap<Sstring, Object>(2); 
result.put ("total", totalCount); 
result.put ("rows", notices); 
return result; 


getAllNotice 方法 有 5 个 参数 ， 一 个 是 Notice 类 型 的 参数 notice， 用 于 封装 表单 传递 来 
的 查询 条 件 ; 有 两 个 Integer 类 型 的 参数 page 和 rows， 用 于 接收 从 前 端 Bootstrap table 控件 
传递 来 的 页 码 和 每 页 显示 的 记录 数 ; 有 一 个 HttpServletRequest 类 型 的 参数 req, 代表 客户 端 
的 请 求 ， 有 一 个 HttpServletResponse 类 型 的 参数 rep， 代 表 服 务 器 的 响应 。 

在 getAllNotice 方法 中 ， 首 先 初 始 化 一 个 分 页 类 对 象 pager， 给 其 设置 curPage 和 
perPageRows 两 个 属性 值 ; 然后 创建 Map<String, Object> 类 型 的 对 象 params， 用 于 封装 查询 
条 件 ; 接着 依次 调用 业务 接口 NoticeService 的 count 方法 ， 获 取 满 足 条 件 的 消息 总 数 ， 调 用 
findNotice 方法 ， 获 取 满 足 条 件 的 消息 列表 ;再 创建 Map<String, Object> 类 型 的 对 象 result， 
保存 查询 结果 数据 ; 最 后 将 返回 结果 转 为 JSON 格式 ， 以 字符 串 的 形式 发 送 到 前 端 页 面 
SendNoticeListjsp， 为 Bootstrap 的 table 控件 提供 数据 源 。 

在 业务 接口 NoticeService 中 ， 声 明 两 个 方法 ， 代 码 如 下 : 

// 根据 条 件 查询 通知 总 数 

Integer count (Map<String，Object> params) 7 


// 分 页 显示 通知 


List<Notice> findNotice (Notice notice, Pager pager); 
在 实现 类 NoticeServiceImpl 中 ， 实 现 count 方法 ， 代 码 如 下 : 


@Override 
public Integer count (Map<String, Object> params) { 
return noticeDao.count (params); 


} 


在 实现 类 NoticeServiceImpl 的 count 方法 中 , 直接 调用 接口 NoticeDao 中 的 count 方法 ， 
代码 如 下 : 
// 根据 条 件 查询 通知 总 数 


@SelectProvider (type = NoticeDynasqlProvider.class, method = "count") 
Integer count (Map<String Object> params); 


在 实现 类 NoticeServiceImpl 中 ， 实 现 findNotice 方法 ， 代 码 如 下 : 


@Override 

public List<Notice> findNotice (Notice notice, Pager pager) { 
// 创建 对 象 params 
Map<String，Object> params = new HashMap<string, Object>(); 
// 将 封装 有 查询 条 件 的 notice 对 象 放 入 params 
params.put ("notice", notice); 


// 根据 条 件 计算 消息 总 数 


int recordCount = noticeDao.count (Params) 7 


@< ER 
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// 给 pager 对 象 设置 rowcount 属性 值 (记录 总 数 ) 


pager.setRowCount (recordCount); 
if (recordCount > 0) { 
// 将 page 对 象 放 入 params 


params.put ("pager", pager); 


77 分 页 获取 消息 
return noticeDao.selectByPage (params); 
} 
findNotice 方法 有 两 个 参数 ， 一 个 是 Notice 类 型 的 参数 notice， 用 于 封装 前 端 页 面 传递 
来 的 查询 条 件 ; 另 一 个 是 Pager 类 型 的 参数 pager， 用 于 封装 从 前 端 页 面 传递 来 的 页 码 和 每 
页 记录 数 。 在 findNotice 方法 中 , 创建 了 一 个 Map<String, Object> 类 型 的 对 象 params， 用 来 
存放 两 个 对 象 , 一 个 是 notice 对 象 , 另 一 个 是 pager 对 象 。 对 于 pager 对 象 来 说 , 放 入 params 
前 ， 还 需 设置 pager 对 象 的 rowCount 属性 值 ， 这 个 值 是 通过 调用 NoticeDao 接口 的 count 
方法 获得 的 。 设 置 好 params 对 象 后 ， 再 调用 NoticeDao 接口 的 selectByPage 方法 获得 当前 
页 的 消息 列表 。 
在 NoticeDao 接口 中 ，selectByPage 方法 的 代码 如 下 : 
// 分 页 查询 通知 
@SelectProvider (type = NoticeDynaSsqlProvider.class, method = 


"selectWwithParam") 
public List<Notice> selectByPage (Map<String, Object> params); 


这 样 ， 已 发 送 消息 列表 的 显示 功能 就 实现 了 。 接 下 来 ， 介 绍 消息 查看 功能 的 实现 过 程 。 

3. 消息 查看 

在 已 发 送 消息 列表 中 ， 单 击 某 一 行 记录 中 的 查看 按钮 ， 将 执行 JavaScript 函数 check， 
其 代码 如 下 : 

function check(nid) { 

window.location.href ="/ccms/views/notice/checkNotice.jsp?nid=" +nid; 

} 

此 时 ， 页 面 重 定向 到 checkNotice.jsp， 并 将 参数 nid 传递 过 去 。checkNotice.jsp 页 面 位 
于 src/main/webapp/views/notice 目录 下 ， 其 效果 如 图 20-31 所 示 。 


20-31 ”查看 消息 


Spring + Spring MVC + MyBatis : 
框架 技术 精 讲 与 整合 案例 一 -一 
在 checkNotice.jsp 页 面 中 ， 最 核心 的 代码 位 于 $(function0 { 六 代码 段 中 ， 如 下 所 示 : 


$(function() { 
Var nid = GetQueryString('nid'); 


$.ajax({ 
url : '/ccms/notice/getNoticeById', 
type : "post'y 


async : false, 
cache : false, 
datau tt 
id s nid 
}, 
dataType : 'json', 
success : function(data) { 
$('#noticeList') .html (); 
if (data.success) { 
$.each ( 
data.rows, 
function(key, val) { 
va content = '<div class="ibox">' 
+ '<div class="ibox-content">' 
+ "<a class="btn-link">' 
+ '<h2>'; 
content += val.title; 
content += '</h2></a><div class="small 
m-b-xs"><strong>'; 
content += val.noticebelong; 
content += '</strong> <span class="text-muted"><i 
class="fa fa-clock-o"></i>' 
+ val.operatetime 
+ '</span></div><p>'; 
content += val.content; 
content += '</p><div class="row"><div 
class="col-md-6"><h5> 类 型 : </h5><button class="btn btn-white btn-xs" 
type="button">'; 
content += val.typeName; 
content += '</button></div>'; 
content += '<div class="col-md-6"><div class="small 
text-right"><h5></h5>'; 
content += '</div></div></div>' 
$('#noticeList') .append( 
content); 
1); 
} else { 
swall({ 
title : "系统 提示 "， 
text : " 暂 无 消息 "， 
type : "warning™" 
}, function() { 


Ty 
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error : function(aa, ee, II) { 
swall(f{ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
}, function() { 


WW 


]) 7 
// 视 图 
var myChart = echarts.init (document .getElementById('echart'), 
'macarons'); 
$.ajax({ 
url : '/ccms/notice/getNoticeDetailNum', 
type : 'post', 
async : false, 
cache : false, 
data : { 


dataType : 'json', 
success : function(data) { 
if (data.success) { 
var read = data.read; 
var vote = data.vote; 
option = { 
EGoltD. 8 攻 
trigger : "item'yv 
formatter : "{a} <br/>{b}: {c} ({d}%)" 
}， 
legend : { 
orient : 'vertical', 
| 
data : [“' 赞 成 '，' 反 对 '，' 已 查收 '，' 未 查收 ' ] 
}， 
series : [ { 
name : ' 投 票 '， 
type : 'pie', 
selectedMode : 'single', 
radius : [ 0, '30%"' ], 


label : { 
normal : { 
position : 'inner' 


}, 
labelLine : { 
normal : { 
show : false 


]， 
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data : vote 
| 
name : ' 查 看 '， 
type : 'pie', 


radioas s [ "40%*, "S55%* 1 
data : read 


下 


Fs 
// 使 用 刚 指 定 的 配置 项 和 数据 显示 图 表 。 
myChart .setOption (option); 
} else { 
swall({ 
title : "系统 提示 "， 
text : "请 求 失败 , 请 稍 后 再 试 "， 
type : "warning" 
}, function() { 
D1); 
} 
bs 
error : function(aa, ee, rr) { 
swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
}, function() { 
]) 7 
Be 
// 指定 图 表 的 配置 项 和 数据 
]) 


在 $(function( { }) 代 码 段 中 ,首先 通 过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ,请 求 
的 地 址 为 /cems/notice/getNoticeById， 这 个 url 请 求 将 映射 到 控制 器 类 NoticeController 中 的 
getNoticeById 方法 ; data 用 于 指定 发 送 到 服务 器 的 数据 ， 这 里 为 id, 表示 消息 编号 ; success 
用 于 指定 请 求 成 功 后 调用 的 回调 函数 ，getNoticeById 方法 的 返回 结果 将 传递 到 该 回调 函数 
的 参数 data， 然 后 显示 消息 的 相关 信息 ; error 用 于 指定 请 求 失败 时 被 调用 的 函数 。 

在 控制 器 类 NoticeController 中 ，getNoticeById 方法 的 代码 如 下 : 


// 根据 ia 获取 详细 信息 
@RequestMapping (value = "/getNoticeById", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public Map<String, Object> getNoticeById (Notice notice, HttpServletRequest 
req, HttpServletResponse rep) { 
Map<string, Object> result = new HashMap<string, Object>(2); 
List<Notice> list = noticeService.getNoticeById (notice.getId()); 
用 大- 生生 下 用 证 区 人 人 他: @)》 甘 
result.put ("success", true); 
} else { 
result.put ("success", false); 


@< a 


} 


在 getNoticeById 方法 中 ， 调 用 了 业务 接口 NoticeService 中 的 getNoticeById 方法 ， 根 
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} 
result.put ("rows", list); 
return result; 


据 id 获取 消息 。 
在 NoticeService 接口 中 ， getNoticeById 方法 的 声明 如 下 : 


// 根据 id 获取 notice 信息 
Public List<Notice> getNoticeById(String id); 


在 实现 类 NoticeServiceImpl 中 ， 实 现 getNoticeById 方法 ， 代 码 如 下 : 


@Override 
Public List<Notice> getNoticeById(String id) { 


} 


return noticeDao.getNoticeById(id); 


在 实现 类 NoticeServiceImpl 的 getNoticeById 方法 中 ， 直 接 调用 接口 NoticeDao 中 的 
getNoticeById 方法 。 

在 接口 NoticeDao 中 ，getNoticeById 方法 的 代码 如 下 : 

// 根据 ia 获取 通知 


Q@Select("select n.id,n.userId,n.title,n.content,n.operatetime, 
n.type,su.name as noticebelong," 


+ "(case type when 1 


then ' 消 息 !' when 2 then ' 投 票 ' when 3 then ' 报 修 ' " 


") 


+ "when 4 then ' 通 知 ' end) as typeName from notice as n " 
+ "left join sys_user as su on n.userId=su.userCode where n.id = #{id} 


public List<Notice> getNoticeById(@Param("id") String id); 


在 $(function() { }) 代 码 段 中 ,再 次 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ， 这 次 
请 求 的 url 为 /cems/notice/getNoticeDetailNum， 这 个 url 请 求 将 映射 到 控制 器 类 
NoticeController 中 的 getNoticeDetailNum 方法 ; data 用 于 指定 发 送 到 服务 器 的 数据 ,这 里 为 
nid， 表 示 消 息 编号 ;success 用 于 指定 请 求 成 功 后 调用 的 回调 函数 ，getNoticeDetailNum 方 


时 


法 返 


结果 将 传递 到 该 回调 函数 的 参数 data， 作 为 图 表 控 件 的 数据 源 ，error 用 于 指定 请 求 


失败 时 被 调 用 的 函数 。 
在 控制 器 类 NoticeController 中 ，getNoticeDetailNum 方法 的 代码 如 下 : 


// 根据 ia 获取 信息 详情 

@RequestMapping (value = "/getNoticeDetailNum", method= { RequestMethod.GET, 
RequestMethod.POST }) 

@ResponseBody 

public Map<String, Object> getNoticeDetailNum(String nid, 
HttpServletRequest req, HttpServletResponse res) { 


Map<Sstring, Object> result = new HashMap<string, Object>(2); 
List<Echarts> elr = noticeService.getNoticeDetailNum(nid); 
List<Echarts> elv = noticeService.getNoticeVoteNum(nid); 
result.put ("success", true); 
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result.put ("read", elr); 


result.put ("vote", elv); 
return result; 


. 


在 getNoticeDetailNum 方法 中 ， 依 次 调用 了 业务 接口 NoticeService 中 的 
getNoticeDetailNum 方法 , 根据 消息 编号 获取 已 读 未 读 消 息 数 目 ; 调用 getNoticeVoteNum 方 
法 ， 根 据 消息 编号 获取 投票 信息 。 

在 NoticeService 接口 中 ， getNoticeDetailNum 和 getNoticeVoteNum 方法 的 声明 如 下 : 


// 获取 已 读 未 读 消息 数目 


Public List<Echarts> getNoticeDetailNum(String nid); 
// 获取 投票 信息 
Public List<Echarts> getNoticeVoteNum(String nid); 


在 实现 类 NoticeServiceImpl 中 ， 实 现 getNoticeDetailNum 方法 ， 代 码 如 下 : 


QOverride 

public List<Echarts> getNoticeDetailNum(String nid) { 
List<Echarts> els = noticeDao.getNoticeReadNum(nid); 
return els; 


} 


在 实现 类 NoticeServiceImpl 的 getNoticeDetailNum 方法 中 ， 直 接 调用 了 接口 NoticeDao 
中 的 getNoticeReadNum 方法 ， 其 代码 如 下 : 


// 获取 已 读 未 读 消息 数目 


@Select ("select count (*) as value , (case flag when 0 then ' 未 查收 ' when 1 then 
' 已 查收 ' end) as name " + "from answer where nid = #{nid} group by flag") 
public List<Echarts> getNoticeReadNum(@Param("nid") String nid); 


在 实现 类 NoticeServiceImpl 中 ， 实 现 getNoticeVoteNum 方法 ， 代 码 如 下 : 

@Override 

public List<Echarts> getNoticeVoteNum(String nid) { 
List<Echarts> elv = noticeDao.getNoticeVoteNum(nid) 
return elv; 


} 


在 实现 类 NoticeServiceImpl 的 getNoticeVoteNum 方法 中 ， 直 接 调用 了 接口 NoticeDao 
中 的 getNoticeVoteNum 方法 ， 其 代码 如 下 : 


// 获取 投票 信息 
@Select ("select count (*) as value , (case vote when 1 then ' 赞 成 ' when 2 then 
' 反 对 ' end) as name "+ "from answer where nid = (select id from notice where 


type = '2' and id=#{id}) " + "and (vote=1 or vote =2) group by vote") 
public List<Echarts> getNoticeVoteNum(@Param("id") String id); 


至 此 ， 发 送 消息 功能 就 讲解 完了 。 接 下 来 ， 介 绍 接收 消息 功能 的 实现 过 程 。 


20.8.2 ”接收 消息 
在 后 台 登 录 页 中 ， 若 以 用 户 名 学 生 AA、 密 码 123456 登录 系统 ， 则 以 单位 用 户 的 身份 


@< So a ee a da 
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进入 系统 首页 面 index.jsp。 在 消息 管理 栏目 下 ， 单 击 接收 消息 菜单 ， 打 开 接 收 消息 列表 页 
ReveiveNoticeListjsp, 该 页 面 位 于 src/main/webapp/views/notice 目录 下 , 页 面 效 果 如 图 20-32 
所 示 。 


上 


20-32 ”接收 消息 列表 页 
在 ReveiveNoticeListjsp 页 面 中 ， 需 要 实现 接收 消息 列表 显示 、 消 息 查收 等 功能 。 
1. 接收 消息 列表 显示 


为 了 显示 所 有 发 给 学 生 AA 的 消息 ， 在 ReveiveNoticeListjsp 页 面 中 ， 首 先 定 义 了 一 个 
id 为 noticeList 的 <div> 标 签 ， 如 下 所 示 : 


<div class="row" id="noticeList"></div> 


然后 ， 在 $(function() { }) 代 码 块 中 ， 使 用 <div> 标 签 来 展示 接收 到 的 消息 信息 ， 代 码 


如 下 : 
$(function() { 
$.ajax({ 
url : '/ccms/answer/getNotice', 
type : 'post', 


async : false, 
cache : false, 
data : {}, 
dataType : 'json', 
success : function(data) { 
$('#noticeList') .htm]l (); 
if (data.success) { 
$.each( 
data.rows, 
function(key, val) { 
Va content = '<div class="ibox">" 
+ '<div class="ibox-content">"' 
+ "<a class="btn-link">"' 
+ "<h2>"; 
content += val.title; 
content += '</h2></a><div class="small m-b-xs"><strong>"'; 
content += val.noticebelong; 
content += '</strong> <span class="text-muted"><i 
class="fa fa-clock-o"></i>' + val.operatetime + '</span></div><p>'; 
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@< ee 


content += val.content; 

content += '</p><div class="row"><div 
class="col-md-6"><h5> 类 型 : </h5><button class="btn btn-white btn-xs" 
type="button">'; 

content += val.typeName; 

content += '</button></div>'; 

content += '<div class="col-md-6"><div class="small 
text-right"><h5> 操 作 : </h5>'; 

if (val.flag == "1°') { 

Content += '<button class="btn btn-primary 


btn-xs" type="button">'; 
content += ' 已 处 理 </button>'; 
} else { 
if (val.type == '2') { 
content += '<button class="btn btn-primary 
btn-xs flag" type="button" id="vote true" onclick="changerFlag(\'1\',\'' 
.Ld Ny 
content += ' 赞 同 </button>'; 
content += '&nbsp;&nbsp;<button class="btn 
btn-primary btn-xs flag" type="button" id="vote true" 
javascript:changerFlag(\'2\',\'' + val.id + '\')">'; 
content += ' 反 对 </button>'; 
} else { 
content += '<button class="btn btn-primary btn-xs 
flag" type="button" id="check" onclick="javascript:changerFlag (\'0\',\'' + 
i + WE 


onclick: 


content += ' 点 击 查收 </button>'; 


} 
content += '</div></div></div>' 
$('#noticeList') .append (content); 
上 a 
} else { 
swall({ 
title : "系统 提示 "， 
text : " 暂 无 消息 "， 
type : "warning" 
}, function() { 
]) 7 


] 
error : function(aa, ee, Irr) { 
swall{ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning™" 
}, Eunction() { 
Ds; 


在 $(function() { }) 代 码 块 中 , 通过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 , 请 求 的 地 
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址 为 /ccms/answer/getNotice， 这 个 url 请 求 将 映射 到 控制 器 类 AnswerController 中 的 getNotice 
方法 ，data 参数 用 于 指定 发 送 到 服务 器 的 数据 ;， success 用 于 指定 请 求 成 功 后 调用 的 回调 函 
数 ，getNotice 方法 的 执行 结果 将 传递 给 该 函数 的 参数 data， 然 后 将 接收 到 的 消息 数据 展示 
出 来 。 

在 控制 器 类 AnswerController 中 ，getNotice 方法 的 代码 如 下 : 


Package com.ccms.controller; 


import com.ccms.pojo.Notice; 
import com.ccms.service.AnswerService; 
import com.ccms.tools.JsonUtil; 
import com.google.gson.JsonObject; 
@Controller 
@RequestMapping (value = "/answer", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public class AnswerController { 
@Autowired 
private AnswerService answerService; 
JsonUtil<Notice> json = new JsonUtil<Notice>(); 
// 查询 所 有 notice 
@RequestMapping (value = "/getNotice", method = { RequestMethod.GET, 
RequestMethod.POST }) 
@ResponseBody 
public Map<String, Object> getNotice (Notice notice, HttpServletRequest 
req, HttpServletResponse rep) { 
String uid = (String) req.getSession() .getAttribute ("USERID"); 
String unitid = 
req.getSession() .getAttribute ("UNITINFOID") .tostring(); 
Map<String, Object> result = new HashMap<Sstring, Object>(2); 
List<Notice> list = answerService.getAllNotice (unitid); 
EE (list。.512e() > ON { 
result.put ("success", true); 
} else { 
result.put ("success", false); 
} 
result.put ("rows", list); 
return result; 


在 getNotice 方法 中 ,调用 业务 接口 AnswerService 中 的 getAllNotice 方法 ,根据 单位 编 
号 查询 所 有 消息 。 

在 AnswerService 接口 中 ，getAllNotice 方法 的 声明 如 下 : 

// 根据 单位 查询 所 有 消息 


public List<Notice> getAllNotice (String unitId) ; 


在 接口 AnswerService 的 实现 类 AnswerServiceImpl 中 ， 实 现 getAllINotice 方法 ， 代 码 
如 下 : 


> 人 @ 
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Package com.ccms.service.impl; 


import com.ccms.dao.AnswerDao; 
import com.ccms.pojo.Notice; 
import com.ccms.service.AnswerService; 
@Service ("answerService") 
QTransactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
Public class AnswerServiceImpl implements AnswerService { 
@Autowired 
AnswerDao answerDao; 
Qoverride 
public List<Notice> getAllNoticel(String uid) { 
return answerDao.getAllNotice (uid); 


在 实现 类 AnswerServiceImpl 的 getAlINotice 方法 中 ， 直 接 调用 了 接口 AnswerDao 中 的 


getAllNotice 方法 ， 其 代码 如 下 : 


// 查询 
@Sselect ("select DISTINCT n.id,n.userId,n.title,n.content,n.operatetime," 
+ "n.type,aw.flag,su.name as noticebelong, (case type when 1 then ' 
消息 ' " + "when 2 then ' 投 票 ' when 3 then ' 报 修 ' when 4 then ' 通 知 ' end) as typeName 
"+ "from notice as n " + "left join sys user as su on n.userId=su.userCode 
"+ "left join answer as aw on n.id = aw.nid " + "where n.id in (select nid 
from answer where uid=#{uid}) and uid=#{uid} " +" order by operatetime desc") 
List<Notice> getAllNotice (GParam("uid") String uid); 


这 样 ， 接 收 消息 列表 显示 功能 就 实现 了 。 接 下 来 ， 介 绍 消息 查收 功能 的 实现 过 程 。 
2. 消息 查收 


在 接收 消息 列表 中 ， 如 果 类 型 是 消息 ， 则 单 击 “ 查 收 ” 按 钮 查收 消息 ， 如 果 类 型 是 投 
则 可 单 击 “ 赞 同 ” 或 “反对 ”按钮 查收 消息 。 单 击 这 三 个 按钮 后 ， 都 将 执行 JavaScript 


代码 编制 的 函数 changerFlag。changerFlag 函数 有 两 个 参数 ， 第 一 个 是 voet， 如 果 单 击 “ 查 
收 ” 按 钮 ， 传 递 给 voet 的 值 为 0; 如果 单 击 “ 赞 同 ” 按 钮 ， 传 递 给 voet 的 值 为 1; 如 果 单 
击 “ 反 对 ”按钮 ， 传 递 给 voet 的 值 为 2。 另 一 个 参数 是 nid， 表 示 消 息 编号 。changerFlag 函 


数 的 代码 如 下 : 
// 修 改 状态 位 
function changerFlag(vote，nid) { 
$.ajax({ 
url : '/ccms/answer/changerFlag', 
te 3- "nogty 


async : false, 
cache : false, 
data : { 

Vote 3 Voter 


@< Se de a ad a a 
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nid : nid 
} 
dataType : 'json', 
success : function(data) { 
if (data.success) { 
Swal({ 
title : "系统 提示 "， 
text : "投票 成 功 "， 
type : "success" 
}, function() { 
location.reload(); 
Ds; 
} else { 
swall({ 
title : "系统 提示 "， 
text : "投票 失败 , 请 稍 后 再 试 "， 
type : "warning" 
}, function() { 
Ds; 


}, 
error : function(aa, ee, II) { 
swall({ 
title : "系统 提示 "， 
text : "请 求 服务 器 失败 , 请 稍 候 再 试 "， 
type : "warning" 
}, function() { 
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1); 
} 


在 函数 changerFlag 中 ， 通 过 jQuery AJAX 方式 向 后 台 服 务 器 发 送 请 求 ， 请 求 的 地 址 为 
/ccms/answer/changerFlag, 这 个 url 请 求 将 映射 到 控制 器 类 AnswerController 中 的 changerFlag 
方法 ; data 用 于 指定 发 送 到 服务 器 的 数据 ， 这 里 传递 vote 和 nid 两 个 参数 值 。 

在 控制 器 类 AnswerController 中 ，changerFlag 方法 的 代码 如 下 : 


// 改变 状态 位 
@RequestMapping (value = "/changerFlag", method = { RequestMethod.GET, 
RequestMethod.POST }) 
public String changerFlag (String vote, String nid, HttpServletRequest req, 
HttpServletResponse res) { 
string unitid = 
req.getSession() .getAttribute ("UNITINFOID") .tostring(); 
int result = answerService.upFlag(vote, nid, unitid); 
JsonObject jObject = new JsonObject(); 
jObject.addProperty("success", result); 
try { 
ServletOutputstream jos = res.getOutputstream(); 
jos.write(jObject.tostring() .getBytes ("utf-8")); 
jos.flush(); 
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jos.close(); 


} catch (IOException e) { 
e.printstackTrace (); 


$ 


return null; 


} 

在 changerFlag 方法 中 ， 调 用 业务 接口 AnswerService 中 的 upFlag 方法 ， 修 改 消息 状态 
标记 。 

在 AnswerService 接口 中 ，upFlag 方法 的 声明 如 下 : 

// 修改 状态 位 


Public int upFlag(String vote, String nid, String uid) 


在 实现 类 AnswerServiceImpl 中 ， 实 现 upFlag 方法 ， 代 码 如 下 : 


@Override 
Public int upFlag(String vote, String nid, String uid) { 
if (vote == null || vote.trim().length() <= 0) { 


vote = "0"; 


y 


return answerDao.upFalg (vote, nid, uid); 
} 
在 实现 类 AnswerServiceImpl 的 upFlag 方法 中 , 直接 调用 了 接口 AnswerDao 中 的 upFalg 
方法 ， 其 代码 如 下 : 
// 更 改 通 知 标记 


@Update ("update answer set flag=]l1,vote=#{vote} where nid = #{nid} and uid 


=#{uid}") 
int upFalg (@Param("vote") String vote, @Param("nid") String nid 


@Param("uid") String uid); 
在 图 20-32 所 示 的 接收 消息 列表 页 中 ， 先 单 击 “ 查 收 ” 按 钮 ， 再 单 击 “ 赞 同 ” 按 钮 。 此 
时 ， 在 接收 消息 列表 中 ， 这 两 条 消息 的 状态 均 显示 为 已 处 理 ， 如 图 20-33 所 示 。 


Ws 
tr 
EE 
这 本 入 攻克 和 0 ,请 字 生 AA 本 上 
wm: a 
让 ED 


20-33 ”接收 消息 后 的 消息 状态 
至 此 ， 单 位 用 户 功 能 就 讲解 完了 。 


@< Re 
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20.9 小 结 


本 章 基于 Spring、Spring MVC 与 MyBatis 整合 框架 ， ee 
Bootstrap 的 H+ 框 架 ， 详 细 讲 解 了 校园 通讯 管理 系统 的 具体 实现 过 程 。 系 统 的 主要 功能 
平台 管理 员 功能 ( 院 校 管理 员 管 理 、 院 校 管理 )、 院 校 管理 员 功 能 (单位 管理 、 se 
户 管理 ) 和 单位 用 户 功 能 (发 消息 、 接 收 消息 )， 并 按照 三 层 架 构 开 发 每 个 功能 模块 。 
通过 本 章 的 学 习 ， 和 希望 读者 能 够 进一步 熟练 掌握 Spring、Spring MVC 与 MyBatis 框架 
整合 开发 的 基本 步骤 、 方 法 和 技巧 。 


本 章 将 基于 Spring、Spring MVC 与 MyBatis 整合 框架 ， 并 结合 前 端 Vue 框架 实现 一 个 
简单 的 电 商 网 站 。 


21.1 需求 与 系统 分 析 


本 章 所 实现 的 电 商 网 站 功能 比较 简单 ， 主 要 包括 商品 列表 显示 、 商 品 详情 显示 、 购 物 
车 管理 、 订 单 提交 。 


21.2 数据库 设计 
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续 表 
字段 名 类 型 说 明 

name varchar(255) 商品 名 称 

tid 商品 类 别 id 

brand varchar(20) 品牌 

pic varchar(255) 商品 图 片 

num 商品 数量 

Price decimal(10,0) 商品 价格 

intro longtext 商品 介绍 

status int(4) 商品 状态 


订单 信息 表 order_info 的 字段 说 明 如 表 21-2 所 示 。 
表 21-2 订单 信息 表 order_info 


字段 名 说 明 
id 订单 id 标识， 主键 ， 自 增 
uid 客户 id 
status 16 订单 状态 
ordertime 订单 下 单 时 间 
orderprice 订单 价格 
订单 明细 表 order_detail 的 字段 说 明 如 表 21-3 所 示 。 
表 21-3 订单 明细 表 order_detail 
字段 名 说 明 
id 订单 明细 id， 主 键 ， 自 增 
oid 订单 id 
_pid 商品 id 
num 购买 数量 


21.3 ”环境 搭建 与 配置 文件 


本 章 实现 的 电 商 网 站 采用 了 前 后 台 分 离 技术 ， 可 以 参照 第 17 章 的 内 容 ， 完 成 电 商 网 站 
后 台 框 架 搭 建 及 相关 配置 文件 的 编号。 网 站 后 台 的 目录 结构 如 图 21-1 所 示 。 

网 站 前 端 基于 Vue 脚手架 vue-cli 快速 构建 而 成 ,其 目录 结构 如 图 21-2 所 示 。 由 于 篇 幅 
所 限 ， 有 关 使 用 vue-cli 构建 项 目的 知识 ， 读 者 可 以 通过 本 章 配置 的 视频 学 习 。 

在 网 站 后 台 目 录 结 构 中 ，com.eshop.controller 包 用 于 存放 控制 器 类 ，com.eshop.service 
包 用 于 存放 业务 逻辑 层 接 口 ，com.eshop.service.impl 包 用 于 存放 业务 逻辑 层 接口 的 实现 类 ， 
com.eshop.dao 包 用 于 存放 数据 访问 层 接口 ，com.eshop.pojo 包 用 于 存放 实体 类 。 
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dbconfig.properties 为 存储 数据 库 连 接 信息 的 属性 文件 ， applicationContext.xml 为 Spring 框架 
的 配置 文件 ，dispatcherServlet-servlet.xml 为 Spring MVC 框架 的 配置 文件 。 


4 节 eshop 
4 @ src/main/java 
» 册 com.eshop.controller 
页 comeshop.dao 
南 com.eshop.pojo 
”出 com.eshop.sevice 
六 页 com.eshopservicejimpl 
4 @ src/main/resources 
applicationContext.xml 


目 dbconfig.properties 
加 src/test/java 
@ src/test/resources 
到 Maven Dependencies 
a JRE System Library JavaSE-9] 
4 src 
4 BS main 
4 BS webapp 
BS META-INF 
BS product images 
4 BS WEB-INF 
多 了 b 
罗 dispatcherservlet-servletxml 
因 webxml 
BB test 
EB target 
加 pomxml 


图 21-1 网 站 后 台 的 目录 结构 


4 园 :hopping 
» Bh node_modules 
记 build 
记 config 
2src 
» massets 
4 components 
回 Helowordwe 
回 productwe 
4 天 router 
加 indexjs 
国 routerjs 
4 Bs views 


cartvue 


listvue 


BB productwue 


回 Appwe 
加 indexejs 


回 indexhtml 
国 mainjs 
国 productjs 
@ sylecss 

喇 static 

加 indexhtml 

packagejson 

育 README.md 


21-2 ”网 站 前 端的 目录 结构 


在 网 站 前 端 目录 结构 中 ，views 目录 用 于 存放 每 个 路 由 页 面 的 .vue 文件 ，components 目 
录用 于 存放 公共 组 件 ，router 目录 用 于 存放 路 由 配置 文件 。 在 网 站 前 端 开发 过 程 中 ， 使 用 了 
Vuejjs 的 路 由 插件 vue-router 和 状态 管理 插件 Vuex， 首 先 要 在 main.js 文件 中 导入 并 进行 初 


始 化 ， 代 码 如 下 : 


import Vue from 'vue'; 


import VueRouter from 'vue-router'; 
import Routers from './router/router'; 


import Vuex from 'vuex'; 
import App from './App.vue'; 
import './style.css'; 

import axios from '‘'axios' 
Vue .use (VueRouter); 

Vue.use (Vuex); 


// 路 由 配置 


const RouterConfig = { 


// 使 用 HTML5 的 History 路 由 模式 


mode: 'history'v 
routes: Routers 


bs 


const router = new VueRouter (RouterConfig); 


Touter .beforeEach ( (to, from, 


window.document -title = to.meta.title; 


next (); 


@< A 
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Ds 
router.afterEach((to, from, next) => { 
window.scrollTo(0, 0); 
Ds; 
Const store = new Vuex.Storel({ 
state: { 
// 后 续 开发 添加 
}, 
getters: { 
// 后 续 开发 添加 
jy 
mutations: { 
// 后 续 开发 添加 
} 
actions: { 
// 后 续 开发 添加 
} 
Ds; 
new Vue ({ 
el: '#app', 
router: router, 
store: store, 
render: h => { 
return h (APP) 


DD); 


其 中 , routerjs 文件 用 于 配置 路 由 , Vuex 默认 设置 了 state、 getters、 mutations 和 actions， 
在 后 续 开发 中 将 会 逐步 添加 。style.css 文件 包含 全 局 使 用 CSS 样式 ， 可 以 在 mainjjs 中 直接 
导入 。 


21.4 ”创建 实体 类 


在 com.eshop.pojo 包 中 ,依次 创建 实体 类 ProductInfo、OrderInfo、OrderDetail 和 CartItem。 
实体 类 ProductInfo 用 于 封装 商品 信息 ， 代 码 如 下 : 


Package com.eshop.pojo; 
public class ProductInfo { 
private int id; 
Private String name; 
private String brand; 
private String pic; 
private double price; 
private String intro; 
public String getPic() { 
return pic; 
public void setPic(String pic) { 
this.pic = "http://localhost:8080/eshop/product images/" + pic; 
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// 省 略 其 他 属性 的 getter 和 setter 方法 


} 
实体 类 OrderInfo 用 于 封装 订单 信息 ， 代 码 如 下 : 


Package com.eshop.pojo; 
Public class OrderInfo { 
private Integer id; 
private int uid; 
Private String status; 
Private String ordertime; 
private double orderprice; 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


实体 类 OrderDetail 用 于 封装 订单 明细 信息 ， 代 码 如 下 : 


Package com.eshop.pojo; 
public class OrderDetail { 
Private int id; 
private int oid; 
private int pid; 
private int num; 
// 省 略 上 述 属性 的 getter 和 setter 方法 
} 


CartItem 类 用 于 封装 购物 车 信息 ， 代 码 如 下 : 


Package com.eshop.pojo; 
public class CartItem { 
private int id; 

private int count; 


// 省 略 上 述 属性 的 getter 和 setter 方法 


21.5 创建 几 个 Dao 接口 


在 com.eshop.dao 包 中 ， 创 建 数据 访问 层 接口 ProductInfoDao 和 OrderInfoDao， 使 用 
MyBatis 注解 完成 数据 表 的 操作 。 
在 接口 ProductInfoDao 中 ， 编 写 如 下 代码 : 


Package com.eshop.dao; 
import java.util.List; 
import org.apache.ibatis.annotations.Param; 
import org.apache.ibatis.annotations.Select; 
import com.eshop.pojo.ProductIinfo; 
public interface ProductIinfoDao { 

// 获取 所 有 商品 

BeSelect("select * from product info") 

public List<ProductInfo> selectProductIinfo(); 
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// 根据 商品 id 获取 商品 
select ("select * from product _ info where id = #{id}") 
public ProductInfo selectProductInfoById (epParam("id") int id) 7 


} 


在 接口 ProductInfoDao 中 , selectProductInfo 方法 用 于 获取 所 有 商品 ; selectProductmfoById 
方法 用 于 根据 商品 编号 获取 商品 。 

在 接口 OrderInfoDao 中 ， 编 写 如 下 代码 : 

Package com.eshop.dao; 

import org.apache.ibatis.annotations.Insert; 


import org.apache.ibatis.annotations.Options; 
import com.eshop.pojo.OrderDetail; 


import com.eshop.pojo.OrderInfo; 
public interface OrderInfoDao { 
// 保存 订单 主 表 
@Insert ("insert into order infol(uid,status,ordertime,orderprice) "+ 
"values (#{uid},#{status},#{ordertime},#{orderprice})") 
QQoptions (useGeneratedKeys = true, keyProperty = "id") 
int saveOrderInfo (OrderInfo oi); 
// 保存 订单 明细 
@Insert ("insert into order detail (oid,pid,num) 
Values (#{o0id},#{pid},#{num})") 
QQoptions (useGeneratedKeys = true, keyProperty = "id") 
int saveOrderDetail (OrderDetail od); 


在 接口 OrderInfoDao 中 ，saveOrderInfo 方法 通过 @Insert 注解 映射 一 条 INSERT 语句 ， 
保存 订单 信息 ; saveOrderDetail 方法 通过 @Insert 注解 映射 一 条 INSERT 语句 ， 保 存 订单 
明细 。 


21.6 创建 Service 接口 及 实现 类 


在 com.eshop.service 包 中 ,创建 业务 逻辑 层 接口 ProductInfoService 和 OrderInfoService。 
在 接口 ProductInfoService 中 声明 两 个 方法 ， 代 码 如 下 : 


Package com.eshop.service; 
import java.util.List; 
import com.eshop.pojo.ProductInfo; 
public interface ProductInfoService { 
// 获取 所 有 商品 
public List<ProductInfo> getProductInfo(); 
// 根据 商品 编号 获取 商品 
public ProductInfo getProductInfoById (int id); 
} 


在 接口 OrderInfoService 中 声明 两 个 方法 ， 代 码 如 下 : 


Package com.eshop.service; 
import com.eshop.pojo.OrderDetail; 
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import com-eshop-pojo-OrderInfo7 
public interface OrderIinfoService { 

// 添加 订单 主 表 

public int addorderInfo (OrderInfo oi); 

// 添加 订单 明细 

public int addOorderDetail (OrderDetail od); 
} 


在 com.eshop.service.impl 包 中 ,创建 ProductInfoService 接口 的 实现 类 ProductInfoServiceLmpl, 
代码 如 下 : 


Package com.eshop.service.impl; 


import com.eshop.dao.ProductIinfoDao; 
import com.eshop.pojo.ProductInfo; 
import com.eshop.service.ProductIinfoService; 
Q@Service ("productInfoservice") 
@Transactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class ProductIinfoServiceImpl implements ProductInfoService { 
@Autowired 
ProductIinfoDao productIinfoDao; 
@override 
public List<ProductInfo> getProductInfo() { 
return productIinfoDao.selectProductInfo(); 
¥ 
@Ooverride 
public ProductInfo getProductInfoById(int id) { 
return productIinfoDao.selectProductInfoById (id); 


创建 OrderInfoService 接口 的 实现 类 OrderInfoServiceImpl， 代 码 如 下 : 


Package com.eshop.service.impl; 


org.springframework.transaction.annotation.Transactional; 
import com.eshop.dao.OrderInfoDao; 
import com.eshop.pojo.OrderDetail; 
import com.eshop.pojo.OrderIinfo; 
import com.eshop.service.OrderIinfoService; 
Q@Service ("orderInfoService") 
QTransactional (propagation = Propagation.REQUIRED, isolation = 
Isolation.DEFAULT) 
public class OrderInfoServiceImp1 implements OrderInfoService { 
@Autowired 
OrderIinfoDao orderIinfoDao; 
@oOverride 
public int addorderInfo(OrderInfo oi) { 
return orderIinfoDao.saveOrderInfo (oi); 
} 


@oOverride 
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public int addOorderDetail (OrderDetail od) { 
return orderIinfoDao.saveOrderDetail (od); 


} 
21.7 ”商品 列表 页 


本 章 的 电 商 网 站 实现 了 前 后 台 分 离 ， 由 于 前 端 页 面 发 送 到 后 台 服 务 器 的 AJAX 请 求 无 
法 跨 域 ， 因 此 这 里 使 用 了 Nginx 进行 代理 。Nginx (engine x) 是 一 个 高 性 能 的 HTTP 和 反 向 
代理 服务 器 ， 也 是 一 个 IMAP/POP3/SMTP 服务 器 。 由 于 篇 幅 所 限 ，Nginx 的 配置 过 程 此 处 
不 再 详 述 ， 读 者 可 以 通过 本 章 视频 教程 学 习 。 

配置 并 启动 Nginx， 然 后 在 Windows 命令 窗口 中 通过 npm run dev 命令 ， 启 用 前 端 项 目 
shopping。 在 浏览 器 地 址 栏 中 ， 输 入 http://localhost:8888/shopping/index.html 这 个 url， 就 可 
以 看 到 商品 列表 页 了 ， 效 果 如 图 21-3 所 示 。 


酌 牌 : APPLE ThinkPad 联 旭 (Lenoyo) ”华硕 (ASUS) 况 的 (Midea ) 海尔 ( Haier] 源 信 ( Hisense ) 
排序 : 有 也 Y 价格 


面 异国 量 


AppleMJVE2CH/A ThinkPadE450C(20E... 联 组 小 新 300 经 典 版 人 6FX5OJX 
Y 6299 ¥4199 ¥4399 ¥4799 


| Fi 
图 21-3 ”商品 列表 页 


在 商品 列表 页 中 ， 可 以 按照 品牌 筛选 (如 APPLE、ThinkPad)， 也 可 以 按照 价格 在 筛选 的 
基础 上 再 进行 排序 。 

商品 列表 页 是 通过 组 件 list.vue 来 实现 的 ， 该 文件 位 于 views 目录 下 。 在 介绍 这 个 组 件 
之 前 ， 先 来 看 下 单个 商品 是 如 何 展示 的 。 单 个 商品 展示 是 通过 另 一 个 组 件 product.vue 来 实 
现 的 ， 该 组 件 位 于 components 目录 下 ， 其 代码 如 下 : 


<template> 


<div class="product"> 
<router-link :to="'/product/' + info.id" class="product-main"> 
<img :src="info.pic"> 
<h4>{{ info.name }}</h4> 


<div class="product-cost">¥ {{ info.price }}</div> 
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<div class="product-add-cart" Q@click.prevent="handleCart"> 加 入 购 
物 车 </div> 
</router-link> 
</div> 
</template> 
<script> 


export default { 
// 声明 需要 从 父 级 接收 数据 
props: { 
info: Object 
}, 
methods: { 
handlecart () { 
this.$store.cormmit ('addCart', this.info.id); 
3 
} 
}; 
</script> 
<!-- 以 下 样式 只 作用 于 当前 的 .vue 文件 --> 
<style scoped> 
.Product{ 
width: 25%; 
float: left; 


<! 此 处 省 略 了 其 他 样式 定义 --> 

</style> 

在 product.vue 文件 中 ， 单 个 商品 展示 的 样式 定义 在 <style scoped> 标 记 部 分 。 由 于 商品 
属性 比较 多 , 为 了 方便 父子 组 件 传递 参数 , 在 props 选项 中 定义 了 一 个 属性 info 来 接收 对 象 
格式 的 数据 ， 父 组 件 可 以 直接 将 数据 传递 过 来 赋值 给 info。 

有 了 单个 商品 展示 组 件 , 还 需要 从 后 台 获 取 商 品 数据 , 由 于 Vuejs 本 身 没 有 提供 AJAX 
方法 ， 因 此 后 台数 据 的 获取 是 通过 第 三 方 的 HITP 库 axios 实现 的 。 在 命令 端口 中 ， 首 先 切 
换 到 项 目 路 径 ， 这 里 为 d:/shopping， 然 后 输入 如 下 命令 来 安装 axios 插件 。 


npm install --save axios 


商品 列表 相关 的 数据 是 通过 Vuex 来 维护 的 , 在 main.js 文件 的 Vuex 中 声明 与 数据 列表 
(商品 列表 和 购物 车 列表 ) 相 关 的 state、mutations 和 actions。 


Const store = new Vuex.Storel({ 
state: { 
// 商品 列表 
productList: [], 
// 购物 车 列表 


cartList: [] 


Ys 
mutations: { 
// 添加 商品 列表 
setProductList(state, data) { 
state.productList = data; 
. 
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} 
actions: { 
// 请 求 商品 列表 
getProductList (Context) { 
// 通过 ajax 获取 
axios.get('/eshop/product/getProduct'). 
then (function(result) { 
context.commit('setProductList', result.data); 


}) 


]) 


在 Vuex 的 actions 选项 中 ， 定 义 了 一 个 函数 getProductList， 该 函数 在 后 面 将 要 实现 的 
组 件 list.vue 内 可 以 通过 this.$store.dispatch 触发 。 在 getProductList 函数 中 ， 首 先 通过 axios 
向 后 台 服 务 器 发 送 /eshop/product/getProduct 这 个 url 请 求 ， 服 务 器 返回 的 数据 绑 定 到 参数 
result 中 ; 然后 通过 调用 mutations 选项 中 定义 的 setProductList 方法 ， 将 数据 设置 到 商品 列 
表 productList 中 。 

eshop/product/getProduct 这 个 url 请 求 将 映射 到 后 台 项 目 eshop 中 的 控制 器 类 
ProductInfoController 的 getProductInfo 方法 ， 其 代码 如 下 : 


package com.eshop.controller; 


import com.eshop.pojo.ProductInfo; 
import com.eshop.service.ProductIinfoService; 
@Controller 
@RequestMapping ("/product") 
public class ProductIinfoController { 
@Autowired 
ProductIinfoService productInfoService; 
@RequestMapping (value = "/getProduct", method = { 
RequestMethod.GET, RequestMethod.POST }) 
@ResponseBody 
public List<ProductInfo> getProductIinfo() { 
List<ProductInfo> pList = productIinfoService.getProductIinfo(); 
return pList; 


} 


在 getProductInfo 方法 中 ， 调 用 业务 接口 ProductInfoService 中 的 getProductInfo 方法 获 
取 所 有 商品 数据 ， 并 将 其 转换 为 JSON 格式 ， 再 发 送 到 前 端 页 面 。 

前 面 曾 提 到 过 ， 商 品 列表 页 是 通过 组 件 list.vue 来 实现 的 。 现 在 可 以 看 下 这 个 文件 了 ， 
与 商品 列表 显示 相关 的 代码 如 下 : 

<template> 


<div v-show="list.length"> 

<!-- 遍历 商品 列表 ， 构 建 多 个 components/product.vue 组 件 --> 

<Product v-for="item in list" :info="item" :key="item.id"> 
</Product> 

<div class="product-not-found" Vv-show="!1ist.length"> 暂 无 相关 商品 
</div> 


Spring + Spring MVC + MyBatis :2333333333 
框架 技术 精 讲 与 整合 案例 


</div> 
</template> 
<script> 
// 导入 单个 商品 展示 组 件 
import Product from '../components/product.vue'; 
export default { 
components: { Product }, 
computed: { 
39 《) 
// 从 Vuex 获取 商品 列表 数据 
return this.$store.state.productList; 
} 
}, 
mounted () { 
// 初始 化 时 ， 通 过 Vuex 的 action 请 求 数据 
this.$store.dispatch('getProductList'); 
} 
} 
</script> 
<style scoped> 
// 此 处 省 略 了 1ist .vue 组 件 的 样式 
</style> 


在 组 件 list.vue 初始 化 时 ， 首 先 调用 Vuex 的 action 中 的 getProductList 方法 请 求 商品 列 
表 数 据 , 然 后 遍历 商品 列表 ,构建 多 个 components/product.vue 组 件 ,每 个 components/product.vue 
组 件 用 于 单个 商品 展示 。 

打开 浏览 器 ， 输 入 地 址 http://localhost:8888/shopping/index.html， 就 可 以 看 到 商品 列表 
了 ， 如 图 21-4 所 示 。 
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图 21-4 商品 列表 
接 下 来 ， 介 绍 如 何 实现 对 商品 按 品 牌 筛选 和 按 价格 排序 的 功能 。 
1. 按 商品 价格 排序 


为 了 实现 按照 价格 排序 ,在 遍历 商品 列表 时 就 不 能 直接 使 用 数据 list 了 ， 也 不 能 直接 对 
list 进行 操作 ， 和 否则 会 破坏 原 有 数据 。 因 此 ， 这 里 使 用 计算 属性 来 动态 返回 过 滤 后 的 数据 。 
在 listvue 组 件 中 ， 与 排序 相关 的 代码 如 下 : 
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<template> 
<div v-show="list.length"> 
<div class="list-control"> 
<!-- 价格 排序 按钮 --> 
<div class="list-control-order"> 
<span> 排 序 : </span> 


<span 
class="list-control-order-item" 
:class="{on: order === "'}" 
eclick="handleorderDefault"> 默 认 </span> 
<span 


class="list-control-order-item" 
:class="{on: order.indexOof('price') > -1}" 
Qclick="handleOrdercost"> 价 格 
<template v-if="order 'price-asc'">1</template> 
<template v-if="order 'price-desc'">1,</template> 
</span> 
</div> 
</div> 
<!-- 遍历 商品 列表 ， 构 建 多 个 components/product .vue 组 件 --> 
<Product v-for="item in orderedAndFilteredList" 
:info="item" :key="item.id"></Product> 
<div class="product-not-found" 
VvV-show="!orderedAndFilteredList.length"> 暂 无 相关 商品 </div> 
</div> 
</template> 
<script> 
// 导入 单个 商品 展示 组 件 
import Product from '../components/product.vue'; 
export default { 
components: { Product }, 
computed: { 
ES 
// 从 Vuex 获取 商品 列表 数据 


return this.$store.state.productList; 


}, 
orderedAndFilteredList () { 

// 复制 原始 数据 

let list = [...this.]list]; 

// 按 品牌 过 滤 ， 此 功能 稍 后 实现 

// 按 价格 排序 

if (this.order ! 和 二 

if (this .order "Price-desc') { 
list = list.sort((a, b) => b.price - a.price); 


} else if (this.order === 'price-asc') { 
list = list.sort((a, b) => a.price - b.price); 


} 


return list; 


}, 
data () { 
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return { 


// 排序 依据 ， 取 值 price-desc: 价格 降序 ，price-asc: 价格 升序 


Grders YY 


}, 
methods: { 
// 处 理 默认 排序 
handleOrderDefault () { 
this.order = "7 


和 
// 处 理 按 价格 排序 


handleOrderCost () { 


if (this.order === 'price-desc') { 
this.order = "price-asc'; 

} else { 
this.order = "price-desc'; 

} 


3 

] 

mounted () { 

// 初始 化 时 ， 通 过 Vuex 的 action 请 求 数据 

this.$store.dispatch('getProductList'); 

} 

} 
</script> 


在 遍历 商品 列表 时 ， 使 用 计算 属性 orderedAndFilteredList， 会 返回 排序 后 的 数据 ， 排 序 
依据 通过 data:order 指定 ， 默 认为 空 ( 即 price-desc)。price-asc 时 按照 价格 升序 ，price-desc 
时 按照 价格 降序 。 排 序 时 通过 JavaScript 数组 的 sort 方法 , 对 数组 中 前 后 两 个 元 素 进行 比较 。 
在 对 <Product> 循 环 时 ， 将 list 改 为 orderedAndFilteredList， 显 示 的 就 是 过 滤 后 的 数据 了 。 此 
外 ， 在 <template> 模 板 里 还 添加 了 价格 排序 按钮 。 单 击 价格 按钮 ， 通 过 执行 handleOrderCost 
方法 ， 实 现 升序 和 降序 两 种 状态 的 切换 。 此 时 浏览 网 站 ， 单 击 价格 按钮 ， 就 能 看 到 商品 按 
照 价 格 排列 了 ， 如 图 21-5 所 示 。 
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2. 按 品牌 筛选 


为 了 实现 按 品牌 第 选 ， 首 先 需 要 获取 品牌 数据 。 在 main.js 文件 中 ， 品 牌 数 据 可 以 作为 
getters 从 Vuex 的 productList 中 遍历 获取 ， 相 关 代 码 如 下 : 


// 数组 去 重 

function getFilterArray(array) { 
const res = []; 
Gonst json = {}3 


for(let i = 0; i < array.length; i++) { 
const self = array[i]; 
if(!json[_self]) { 
res.push( self); 
json[_self] = 1; 
} 
return res; 
} 
Const store = new Vuex.Storel({ 
state: { 
// 商品 列表 
productList: [], 
// 购物 车 列表 
cartList: [] 
和 
getters: { 
brands: state => { 
const brands = state.productList.map (item => item.brand); 
return getFilterArray (brands); 


1D); 


getters 中 的 brands 依赖 于 productList， 通 过 map 方法 将 productList 中 的 brand 数据 过 
滤 出 来 ， 再 利用 自 定义 函数 getFilterArray 将 数组 中 重复 的 品牌 去 除 。 


然后 ， 在 list.vue 组 件 中 将 Vuex 中 的 品牌 数据 引入 进来 ， 并 完成 商品 列表 过 滤 。 此 外 ， 
还 需 添加 品牌 筛选 按钮 ， 相 关 代 码 如 下 : 


<template> 
<div v-show="list.length"> 
<div class="list-control"> 
<!-- 品牌 筛选 按钮 --> 
<div class="1ist-control-filter"> 
<span> 品 牌 : </span> 


<span 
class="list-control-filter-item" 
:class="{on: item === filterBrand}" 


Vv-for="item in brands" 


Q@click="handleFilterBrand(item)">{{ item }}</span> 
</div> 


<!-- 价格 排序 按钮 --> 
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<!-- 遍历 商品 列表 ， 构 建 多 个 components/product .vue 组 件 --> 


<Product v-for="item in 


orderedAndFilteredList" :info="item" :key="item.id"></Product> 


<div class="product-not-found™ 
Vv-show="!orderedAndFilteredList.length"> 暂 无 相关 商品 </div> 
</div> 
</template> 
<script> 
// 导入 单个 商品 展示 组 件 


import Product from '../components/product.vue'; 


export default { 
components: { Product }, 
computed: { 
St AY { 
// 从 Vuex 获取 商品 列表 数据 
return this.$store.state.productList; 
}, 
brands () { 
return this.$store.getters.brands; 
}, 
orderedAndFilteredList () { 


// 复制 原始 数据 
let list = [...this.list]; 
// 按 品牌 过 滤 
if (this.filterBrand !== '') { 


list = list.filter(item => item.brand 
this.filterBrand); 


// 此 功能 前 面 已 实现 ， 由 于 篇 幅 所 限 ， 此 处 省 略 相关 代码 
return list; 
} 
}, 
data () { 
return { 
// 过 滤 依 据 
2 “" 
// 排序 依据 
人 
¥ 
] 
methods: { 
// 处 理 品 牌 筛选 
handleFilterBrand (brand) { 
if (this.filterBrand brand) { 
this.filterBrand et 
} else { 
this.filterBrand = brand; 
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mounted () { 
// 初始 化 时 ， 通 过 Vuex 的 action 请 求 数据 
this.$store.dispatch('getProductList'); 
} 
} 
</script> 
通过 对 brands 遍历 ， 生 成 多 个 品牌 按钮 。 第 一 次 单 击 品牌 按钮 时 ， 会 执行 
handleFilterBrand 函数 ， 设 置 要 筛选 的 品牌 名 称 。 再 次 单 击 该 按钮 时 ， 会 取消 设置 。 
此 时 浏览 网 站 ， 先 单 击 一 个 品牌 按钮 ， 再 单 击 价格 按钮 ， 就 能 看 到 商品 先 按照 品牌 得 
选 ， 再 按照 价格 排序 的 效果 了 ， 如 图 21-6 所 示 。 
至 此 ， 商 品 列表 页 的 功能 就 实现 了 。 接 下 来 ， 介 绍 商品 详情 页 的 实现 过 程 。 
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21.8 商品 详情 页 


商品 详情 页 为 views 目录 下 的 productvue， 页 面 效果 如 图 21-7 所 示 。 
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首先 ， 需 要 在 routerjs 文件 中 为 商品 详情 页 product.vue 配置 路 由 ， 代 码 如 下 : 
// 引入 组 件 
import product from "../views/product.vue"; 
Const routers = [{ 


和 
path: '/product/:id'yv 
meta: { 

title: ' 商 品 详情 ' 

}, 
component: product 

} 

]; 


export default routers; 


在 商品 列表 页 中 ， 单 击 某 个 商品 跳 转 到 商品 详情 页 时 ， 需 要 将 商品 的 id 传递 过 去 。 
此 商品 详情 的 路 由 接收 一 个 参数 id， 这 个 参数 就 是 商品 的 id。 

在 商品 详情 页 中 ， 通 过 $route 可 以 获取 当前 路 由 的 参数 ， 也 就 是 商品 编号 ; 然后 通过 
AJAX 向 后 台 服 务 器 发 送 请 求 ， 获 取 这 个 商品 的 信息 ， 相 关 代码 如 下 : 


<script> 
import axios from 'axios' 
export default { 
data() { 
return { 
// 获取 路 由 中 的 参数 
id: parseInt (this.$route.params.id), 
product: null 
入 
methods: { 
getProduct () { 
Var self=this; 
// 通过 ajax， 根据 商品 id 向 后 台 服 务 器 获取 商品 信息 
axios.get('/eshop/product/getProductById/' + 
this.id) .then(function(result) { 
self.product = result.data; 
}) 
} 
] 
mounted () { 
// 初始 化 时 ， 请 求 数据 
this.getProduct (); 
} 
下 
</script> 


eshop/product/getProductByld 这 个 ul 请 求 将 映射 到 后 台 项 目 eshop 中 的 控制 器 类 
ProductInfoController 的 getProductImfoById 方法 ， 并 将 商品 id 传递 过 去 ， 其 代码 如 下 : 


@RequestMapping ("/getProductById/{id}") 
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@ResponseBody 

public ProductInfo getProductInfoById(@PathVariable("id") Integer id)1{ 
ProductIinfo product=productIinfoService.getProductInfoById (id); 
return product; 


} 


从 后 台 服 务 器 获取 数据 后 ， 就 可 以 将 数据 写 入 商品 详情 页 的 模板 <template> 中 ， 相 关 代 
码 如 下 : 


<template> 
<div v-if="product"> 
<div class="product"> 
<div class="product-image"> 
<img :src="product.pic"> 
</div> 
<div class="product-info"> 
<hl class="product-name">{{ product.name }}</hl> 
<div class="product-cost">¥ {{ product.price }}</div> 
<div class="product-add-cart" eclick="handleaddTocart"> 加 
入 购物 车 </div> 
</div> 
</div> 
<div class="product-desc"> 
<h2> 产 品 介绍 </h2> 
{{ product .intro }} 
</div> 
</div> 
</template> 


此 时 浏览 网 站 ， 就 可 以 看 到 图 21-7 所 示 的 商品 详情 页 了 。 


21.9 购物 车 页 


购物 车 主要 用 于 暂 存 客户 购买 的 商品 ， 客 户 还 可 以 删除 购物 车 的 商品 、 清 空 购物 车 和 
修改 购物 车 中 商品 数量 ， 购 物 车 页 面 效 果 如 图 21-8 所 示 。 
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将 商品 放 入 购物 车 是 通过 Vuex 来 完成 的 ， 在 mainjjs 的 Vuex 中 ， 首 先 配 置 state 和 
mutations 两 个 选项 ， 相 关 代 码 如 下 : 


Const store = new Vuex.Storel({ 


state: { 
// 商品 列表 
productList: [], 


// 购物 车 列表 


Cartlists [1 


mutations: { 


// 添加 到 购物 车 
addCart (state, id) { 
// 先 判断 购物 车 是 否 已 有 ， 如 果 有 ， 则 数量 +1 
const isAdded = state.cartList.find(item => item.id === id); 
if(isAdded) { 
isAdded.count++; 
} else { 
state.cartList.push({ 
id: id, 
count: 1 
}) 
} 


}, 
// 修改 购物 车 中 的 商品 数量 
editCartCount (state, payload) { 
const product = state.cartList.find(item => item.id 


payload.id); 
product.count += payload.count; 


}, 
// 删除 购物 车 中 的 商品 


deleteCart (state, id) { 
const index = state.cartList.findIndex (item => item.id === id); 


state.cartList.splice(index, 1); 


}, 

// 清空 购物 车 

emptyCart (state) { 
state.cartList = []; 


La 

在 Vuex 的 state 选项 中 ，cartList 用 于 保存 购物 车 记录 ， 其 格式 是 数组 。 数 组 cartList 
中 的 每 一 个 元 素 都 是 一 个 对 象 ， 包 含 商品 id 和 购买 数量 这 两 个 数据 。 

在 mutations 选项 中 ， 依 次 定义 了 addCart、editCartCount、deleteCart 和 emptyCart 四 个 
方法 。 

addCart 方法 用 于 将 商品 添加 到 购物 车 , 其 接收 的 参数 是 商品 id。 添 加 前 , 先 判断 cartList 
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中 是 否 已 存在 该 商品 ， 如 果 已 存在 ， 则 数量 加 1， 否 则 将 商品 添加 到 cartList。 
editCartCount 方法 用 于 修改 购物 车 中 的 商品 数量 ;deleteCart 方法 用 于 删除 购物 车 中 指 
定 id 的 商品 ， emptyCart 方法 用 于 清空 购物 车 。 
有 了 购物 车 数据 ， 就 可 以 将 这 些 数据 显示 出 来 了 。 在 app.vue 文件 中 ， 首 先 定义 购物 车 
入 口 ， 相 关 代码 如 下 : 


<template> 
<div> 
<div class="header"> 
<router-link to="/list" class="header-title"> 电 商 网 站 
</router-link> 
<div class="header-menu"> 
<router-link to="/cart" class="header-menu-cart"> 
购物 车 
<span v-if="cartList.length">{{ cartList.length }}</span> 
</router-link> 
</div> 
</div> 
<router-view></router-view> 
</div> 
</template> 


购物 车 页 为 cart.vue， 该 文件 位 于 views 目录 下 ， 其 代码 如 下 : 


<template> 
<div class: 


"cart"> 
<div class="cart-header"> 
<div clas cart-header-title"> 购 物 清单 </div> 
<div class="cart-header-main"> 
<div class="cart-info"> 商 品 信息 </div> 
<div class="cart-price"> 单 价 </div> 
<div class="cart-count"> 数 量 </div> 
<div class="cart-cost"> 小 计 </div> 
<div class="cart-delete"> 删 除 </div> 
</div> 
</div> 
<div class="cart-content"> 


<div class="cart-content-main" v-for="(item, index) in 
cartList"> 
<div class="cart-info"> 
<img :src="productDictList[item.id] .pic"> 
<span>{{ productDictList[item.id] .name }}</span> 
</div> 
<div 
class="cart-price">¥ {{ productDictList[item.id] .price }}</div> 
<div class="cart-count"> 


<span class="cart-control-minus™" 
Q@click="handleCount (index, -1)">-</span> {{ item.count }} 

<span class="cart-control-add™" 
Q@click="handleCount (index, 1)">+</span> 
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</div> 

<div class="cart-cost">¥ {{ productDictList[item.id] .Price 
* item.count }}</div> 

<div class="cart-delete"> 


<span class="cart-control-delete™" 
"nandleDelete (index) "> 删除 </span> 
</div> 
</div> 
<div class="cart-empty" v-if="!cartList.length"> 
购物 车 为 空 </div> 
</div> 
<div class="cart-footer" v-show="cartList.length"> 
<div class="cart-footer-desc"> 
共计 <span>{{ countAll }}</span> 件 商品 
</div> 
<div class="cart-footer-desc"> 
应 付 总 额 <span>¥ {{ costAll }}</span> 
</div> 
<div class="cart-footer-desc"> 
<div class="cart-control-order"” @click="handleOrder"> 下 单 </div> 
</div> 
</div> 
</div> 
</template> 
<script> 
import axios from 'axios' 
export default { 
computed: { 
cartList() { 
return this.$store.state.cartList; 


}, 
productList() { 
return this.$store.state.productList; 
}, 
productDictList() { 
const dict = {}; 
this.productList.forEach(item => { 
dict[item.id] = item; 
1D); 
return dict; 
]} 
CountRAl1I() { 
let count = 07 
this.cartList.forEach(item => { 
count += item.count; 
Fs 
return count; 
La 
costAll() { 
let cost = 0; 
this.cartList.forEach(item => { 
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cost += this.productDictList[item.id] .price * 
item.count; 
时 过 
return cost; 
下 
}, 
methods: { 
handleCount (index, count) { 
if(count < 0 && this.cartList[index] .count === 1) return; 
this.$store.commit ('editCartCount', { 
id: this.cartList[index] .id, 
count: count 
$s 
} 
handleDelete (index) { 
this.$store.commit ('deleteCart', 
this.cartList[index] .id); 
} 
} 
} 
</script> 
<style scoped> 
// 此 处 省 略 了 cart .vue 的 样式 
</style> 


在 购物 车 页 cart.vue 的 <scrip 仿 中， 首先 定义 了 cartList、productList、productDictList、 
countAll 和 costAll 这 5 个 计算 属性 。 其 中 ， 计 算 属性 cartList 用 于 从 Vuex 中 获取 购物 车 数 
据 cartList; 计算 属性 productList 用 于 从 Vuex 中 获取 商品 列表 数据 productList; 计算 属性 
productDictList 用 于 将 商品 列表 数据 productList 转换 为 字典 , 方便 快速 读 取 。productDictList 
是 对 象 ，key 是 商品 id，value 是 商品 信息 ; 计算 属性 countAll 用 于 计算 商品 总 数量 ;计算 
属性 costAll 用 于 计算 商品 总 价格 。 

然后 定义 了 handleCount 和 handleDelete 两 个 方法 ，handleCount 方法 用 于 修改 cartList 
中 指定 商品 的 购买 数量 ，handleDelete 方法 用 于 删除 cartList 中 指定 的 商品 。 这 两 个 方法 都 
接收 参数 index, index 是 遍历 cartList 时 的 索引 。 此 外 ,这 两 个 方法 交 给 了 Vuex 中 的 mutations 
来 操作 数据 。 在 mainjs 中 ，Vuex 中 的 mutations 的 代码 如 下 : 

Const store = new Vuex.Storel({ 

state: { 
// 购物 车 列表 
cartList: [] 


} 


mutations: { 


// 修改 购物 车 中 的 商品 数量 
editCartCount (state, payload) { 
const product = state.cartList.find(item => item.id === 
payload.id); 
product.count += payload.count; 
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// 删除 购物 车 中 的 商品 


deleteCart (state, id) { 
const index = state.cartList.findIindex (item => item.id === id); 
state.cartList.splice(index, 1); 


21.10 订单 提交 


在 购物 车 页 面 中 ， 单 击 “ 下 单 ” 按 钮 ， 执 行 函数 handleOrder。 这 个 函数 定义 在 listvue 
文件 的 <scrip 人 > 中 的 methods 选项 内 ， 相 关 代码 如 下 : 


<script> 
import axios from '‘'axios' 
export default { 


methods: { 


// 处 理 下 单 
handleOrder() { 
let param = new URLSearchParams (); 
let cart = JSON.stringify(this.$store.state.cartList) ; 
param.append('cart', cart); 


axios ({ 
method: 
'post', 
url: 


'/eshop/order/handlerOrder', 
data: param 
Hs 
this.$store.commit ('emptyCart'); 
window.alert (' 下 单 成 功 '); 


} 
} 

</script> 

在 handleOrder 方法 中 ， 首 先 通过 axios 向 后 台 服 务 器 发 送 请 求 ， 请 求 的 ul 为 
/eshop/order/handlerOrder, 这 个 请 求 将 映射 到 控制 器 类 OrderInfoController 中 的 handlerOrder 
方法 ，data 用 于 指定 要 传递 的 参数 ， 这 里 将 传递 的 参数 封装 在 URLSearchParams 类 型 的 对 
象 param 中 ，param 里 存放 的 是 购物 车 数据 。 然 后 ， 调 用 Vuex 的 emptyCart 方法 清空 购 
物 车 。 

在 控制 器 类 OrderInfoController 中 ，handlerOrder 方法 的 代码 如 下 : 


Package com.eshop.controller; 


@< Sd a a a ee 
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import com.fasterxml .jackson.core.type.TypeReference; 
import com.fasterxml .jackson.databind.JsonMappingException; 
import com.fasterxml .jackson.databind.ObjectMapper; 
@Controller 

@RequestMapping ("/order") 

public class OrderIinfoController { 


@Autowired 

OrderInfoService orderIinfoService; 

@Autowired 

ProductIinfoService productIinfoService; 

@RequestMapping (value = "/handlerOrder", method = { 
RequestMethod.GET, RequestMethod.POST }) 

@ResponseBody 


Public String handlerOrder (String cart) throws JsonParseException, 
JsonMappingException, IOException { 
// 创建 objectMapper 对 象 , 实现 JavaBean 和 JSON 的 转换 
ObjectMapper mapper = new ObjectMapper () 7 
// 将 JSON 字符 串 转换 成 List<CartItem> 集 合 
List<CartItem> ciList = mapper.readValue (cart, new 
TypeReference<ArrayList<CartIitem>>() { 
]) 2 
OrderInfo oi = new OrderInfo(); 
oi.setUid(1); 
oi .setStatus ("未 付款 "); 
oi.setOrdertime (new SimpleDateFormat ("yyyy-MM-dd 
HH:mm:ss") .format (new Date())); 
double orderPrice = 0; 
for (CartItem ci : ciList) { 
ProductInfo pi = 
productInfoService.getProductInfoById(ci.getId()); 
orderPrice += ci.getCount() * pi.getPrice(); 
} 
oi.setOrderprice (orderPrice); 
// 保存 订单 信息 
orderInfoService.addorderInfo(oi)7 
for (CartItem ci : ciList) { 
OrderDetail od=new OrderDetail (); 
od.setOoid(oi.getId()); 
od.setPid(ci.getId()); 
od.setNum(ci.getCount ()); 
// 保存 订单 明细 
orderInfoSservice.addOorderDetail (od); 
} 


return "sucess"; 


} 


在 OrderInfoController 类 的 handlerOrder 方法 中 ， 首 先 将 前 端 页 面 传递 来 的 JSON 格式 
的 购物 车 数据 转换 成 List<CartItem> 集 合 ; 然后 调用 业务 接口 OrderInfoService 中 的 
addOrderInfo 保存 订单 信息 到 数据 表 order info; 再 循环 调用 接口 OrderInfoService 中 的 
addOrderDetail 方法 保存 订单 明细 。 


>@ 
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2111 小 结 


本 章 基 于 Spring、Spring MVC 与 MyBatis 整合 框架 ， 采 用 注解 方法 并 结合 前 端 Vue 框 
架 ， 详 细 讲解 了 一 个 简单 的 电 商 网 站 的 具体 实现 过 程 。 电 商 网 站 实现 的 功能 包括 商品 列表 
页 显示 、 商 品 详情 页 显示 、 购 物 车 页 显示 和 订单 提交 ， 并 按照 三 层 架 构 开 发 每 个 功能 模块 。 

通过 本 章 的 学 习 ， 和 希望 读者 能 够 熟练 掌握 Spring、Spring MVC 与 MyBatis 框架 整合 开 
发 的 基本 步骤 、 方 法 和 技巧 。 


@< RR 


